\n
Motion graphics are all the rage. And it’s no surprise, given how good they are at making you pay attention to something. One of the hallmarks of motion graphics are the seamless transitions between animations. Ideas flow from one to another so fluidly that you barely notice. Here are a couple of tried-and-true transition types that you can use to make your own motion graphics–inspired animations in Storyline.
\n
Picture-in-Picture Transitions
\n
This commonly used transition type consists of zooming in on part of an image or zooming out to reveal the wider context of an image.
\n
With the zoom region feature in Storyline, it’s super easy to create this effect. Check out the examples below.
\n
Zoom In
\n
\n
Zoom Out
\n
\n
Shape Transitions
\n
This type of transition consists of animating one or more shapes so they fill up the entire screen. It’s great for times when you want to create a smooth transition between two totally different slides.
\n
There are several ways to do this in Storyline, depending on the shapes you’re using and the desired effect. For example:
\n
\n\n- Using enter and exit animations
\n- Using zoom-in and zoom-out animations
\n- Using motion paths
\n
\n
\n
Check out the animated gifs below to see a couple of examples of what this transition type can look like.
\n
Shapes Open Scene
\n
\n
Shapes Close Scene
\n
\n
Pan Transitions
\n
Panning is another popular transition type in motion graphics. And luckily for you, it’s super easy to replicate in Storyline! All you have to do is add a push slide transition to the second slide and you’re all set!
\n
Check out the final result below:
\n
\n
More Resources
\n
This is just the tip of the iceberg in terms of what you can do in Storyline, but it’s a good place to start if you’re new to motion graphics. If you like the examples in this article and want to use them for your next project, or simply want to pick them apart and see how they were created, download the source file here.
\n
And for more motion graphics inspiration, check out the links below:
\n
Example
\n
\n
Templates
\n
\n
Want to try something you learned here, but don’t have Articulate 360? Start a free 30-day trial. And subscribe to our newsletter to get the latest product updates, e-learning examples, and expert advice directly in your inbox.
Very useful info. Thanks for sharing, Allison
","body@stringLength":"92","rawBody":"Very useful info. Thanks for sharing, Allison
","author":{"__ref":"User:user:43234"},"postTime":"2018-06-18T06:21:37.000-07:00","customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"repliesCount":1},"Revision:revision:1099574_1":{"__typename":"Revision","id":"revision:1099574_1","lastEditTime":"2018-06-18T22:47:46.000-07:00"},"QueryVariables:ReplyList:message:1099574:1":{"__typename":"QueryVariables","id":"ReplyList:message:1099574:1","value":{"id":"message:1099574","first":10,"sorts":{"postTime":{"direction":"ASC"}},"repliesFirst":3,"repliesFirstDepthThree":1,"repliesSorts":{"postTime":{"direction":"ASC"}},"useAvatar":true,"useAuthorLogin":true,"useAuthorRank":true,"useBody":true,"useKudosCount":true,"useTimeToRead":false,"useMedia":false,"useReadOnlyIcon":false,"useRepliesCount":true,"useSearchSnippet":false,"useAcceptedSolutionButton":false,"useSolvedBadge":false,"useAttachments":false,"attachmentsFirst":5,"useTags":false,"useNodeAncestors":false,"useUserHoverCard":false,"useNodeHoverCard":false,"useModerationStatus":true,"usePreviewSubjectModal":false,"useMessageStatus":true}},"ROOT_MUTATION":{"__typename":"Mutation"},"CachedAsset:text:en_US-components/community/NavbarDropdownToggle-1744833252955":{"__typename":"CachedAsset","id":"text:en_US-components/community/NavbarDropdownToggle-1744833252955","value":{"ariaLabelClosed":"Press the down arrow to open the menu"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/users/UserAvatar-1744833252955":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/users/UserAvatar-1744833252955","value":{"altText":"{login}'s avatar","altTextGeneric":"User's avatar"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/ranks/UserRankLabel-1744833252955":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/ranks/UserRankLabel-1744833252955","value":{"altTitle":"Icon for {rankName} rank"},"localOverride":false},"CachedAsset:text:en_US-components/tags/TagView/TagViewChip-1744833252955":{"__typename":"CachedAsset","id":"text:en_US-components/tags/TagView/TagViewChip-1744833252955","value":{"tagLabelName":"Tag name {tagName}"},"localOverride":false},"CachedAsset:text:en_US-components/users/UserRegistrationDate-1744833252955":{"__typename":"CachedAsset","id":"text:en_US-components/users/UserRegistrationDate-1744833252955","value":{"noPrefix":"{date}","withPrefix":"Joined {date}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeAvatar-1744833252955":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeAvatar-1744833252955","value":{"altTitle":"Node avatar for {nodeTitle}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeDescription-1744833252955":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeDescription-1744833252955","value":{"description":"{description}"},"localOverride":false},"CachedAsset:text:en_US-components/messages/ThreadedReplyList-1744833252955":{"__typename":"CachedAsset","id":"text:en_US-components/messages/ThreadedReplyList-1744833252955","value":{"title":"{count, plural, one{# Reply} other{# Replies}}","title@board:BLOG":"{count, plural, one{# Comment} other{# Comments}}","title@board:TKB":"{count, plural, one{# Comment} other{# Comments}}","title@board:IDEA":"{count, plural, one{# Comment} other{# Comments}}","title@board:OCCASION":"{count, plural, one{# Comment} other{# Comments}}","noRepliesTitle":"No Replies","noRepliesTitle@board:BLOG":"No Comments","noRepliesTitle@board:TKB":"No Comments","noRepliesTitle@board:IDEA":"No Comments","noRepliesTitle@board:OCCASION":"No Comments","noRepliesDescription":"Be the first to reply","noRepliesDescription@board:BLOG":"Be the first to comment","noRepliesDescription@board:TKB":"Be the first to comment","noRepliesDescription@board:IDEA":"Be the first to comment","noRepliesDescription@board:OCCASION":"Be the first to comment","messageReadOnlyAlert:BLOG":"Comments have been turned off for this post","messageReadOnlyAlert:TKB":"Comments have been turned off for this article","messageReadOnlyAlert:IDEA":"Comments have been turned off for this idea","messageReadOnlyAlert:FORUM":"Replies have been turned off for this discussion","messageReadOnlyAlert:OCCASION":"Comments have been turned off for this event"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeIcon-1744833252955":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeIcon-1744833252955","value":{"contentType":"Content Type {style, select, FORUM {Forum} BLOG {Blog} TKB {Knowledge Base} IDEA {Ideas} OCCASION {Events} other {}} icon"},"localOverride":false}}}},"page":"/blogs/BlogMessagePage/BlogMessagePage","query":{"boardId":"articles","messageSubject":"3-motion-graphics–inspired-transitions-you-can-create-in-storyline","messageId":"1099572","replyId":"1099574"},"buildId":"FP3zsFp6DJl70wDujOvtu","runtimeConfig":{"buildInformationVisible":false,"logLevelApp":"info","logLevelMetrics":"info","openTelemetryClientEnabled":false,"openTelemetryConfigName":"articulate","openTelemetryServiceVersion":"25.3.0","openTelemetryUniverse":"prod","openTelemetryCollector":"http://localhost:4318","openTelemetryRouteChangeAllowedTime":"5000","apolloDevToolsEnabled":false,"inboxMuteWipFeatureEnabled":false},"isFallback":false,"isExperimentalCompile":false,"dynamicIds":["./components/customComponent/CustomComponent/CustomComponent.tsx","./components/community/Navbar/NavbarWidget.tsx","./components/community/Breadcrumb/BreadcrumbWidget.tsx","./components/blogs/BlogArticleWidget/BlogArticleWidget.tsx","./components/messages/MessageView/MessageViewStandard/MessageViewStandard.tsx","./components/customComponent/CustomComponentContent/TemplateContent.tsx","../shared/client/components/common/List/UnwrappedList/UnwrappedList.tsx","./components/tags/TagView/TagView.tsx","./components/tags/TagView/TagViewChip/TagViewChip.tsx"],"appGip":true,"scriptLoader":[]}
