Jump to content
Search Community

How to roll items after pop in animation?

Shahnwazh170 test
Moderator Tag

Recommended Posts

Hey I have created a small example of what I wanna do. As you can see in my codepan video items are popping in correctly but after all three videos popped in I want to animate them on a path so it look like they are scrolling endlessly and I want to make it repeating.

Please help me I'm new to gsap.

See the Pen abJBeXJ by shahnwazh170 (@shahnwazh170) on CodePen

Link to comment
Share on other sites

@mikel thank you, problem is not with scrollmagic although I'll definitely use GSAP Scroll trigger. The main issue is i want to make scrolling animation. After three videos popped in i want them to scroll inside the mobile screen frame svg. and I'm not being able to get that working. I want those video to scroll like we scroll the videos on youtube.

Link to comment
Share on other sites

Hey @Cassie , the main use of scrollTrigger is to trigger animation on some scroll conditions. Lets don't think about triggering animation on scroll. I just want to move the video items in svg on a circular path like. I want to create a feed scrolling animation. I just want to move video items on the mobile screen svg in a loop so it would look like someone is scrolling their phone in svg.

Link to comment
Share on other sites

You wouldn't even necessarily need something that complex if you're trying to create an 'aesthetic' animation.

All the video elements look the same so you only need to create the visual effect of items scrolling. It doesn't actually matter where they really are in the DOM - demo....

See the Pen mdWRrdm by GreenSock (@GreenSock) on CodePen



This demo is using HTML DOM elements but you could do a similar thing with SVG - you would have to look into clipping or masking to do the job of overflow:hidden

  • Like 4
Link to comment
Share on other sites

I've simplified the SVG code down a lot for this example.

See the Pen 9377f4b5f834a4785ae8de143f6a98c8 by cassie-codes (@cassie-codes) on CodePen



The pink rectangle is just there for demo purposes to show you how the mask is working - that shape is duplicated in the mask element.
I'm using <use> to position and reuse the video element.

With SVG stuff a lot of the work is in setting the SVG up nicely - it really helps if you have a readable base to work with!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...