Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Arnoldas Mauragas

TikTok Interaction

Hi, 

I am wondering if it would be possible to create TikTok scrolling animation on invision studio? 

Thank you in advance for the tips. 

Arnold

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by


FAHANMI Ambrose Wuraoluwa
InVision ambassador FAHANMI Ambrose Wuraoluwa , ambassador
Comment actions Permalink

Hi Arnoldas,

It is very possible to create the TikTok scrolling animation using InVision Studio and quite easy too.

  • First create your artboards and add whatever details or information you want as you would normally on different artboards.
  • Lets say you have two artboards A & B, copy all contents of B to A (easier when all the contents are just grouped).
  • Because you want the transition to slide up (tiktok scrolling to next video), move the content you copied down (the opposite direction) till its no longer visible on the artboard but make sure it is still part of the layers on the artboard (check left hand of the screen showing layers in the artboard).
  • Reduce the opacity of the copied layer(s) from B to zero.
  • Create a transition from artboard A to Artboard B using the 'swipe up' option. Use any duration and delay that work best for you (0 delay is perfect most times).

If you want to create a transition back to B, just repeat all the processes but instead of moving the copied content down, you will move it up (opposite direction: the logic for the position you are moving it to is if I am scrolling to the next screen, it comes from beneath but if I am scrolling to the previous screen, it comes from above).

For multiple screens all you have to do is reiterate the process.

You could watch some videos on swipe animation here and here for more guide.
P.S: Make sure you name the elements on each artboard distinctively so that elements that are common to both layers can easily 'autolink'.
If you have any question or difficulty, feel free to always ask.

Regards,
Wurah.

0

join the conversation

to comment, sign up or sign in.