Share Posted May 20, 2021 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 More sharing options...
Share Posted May 20, 2021 Hey @Shahnwazh170, Welcome to the GreenSock Forum. ScrollMagic is not a GreenSock product. You can use GSAP ScrollTrigger with all the many advantages. Here is an example with a single and an endless repeat. See the Pen mdWRbGZ by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 3 Link to comment Share on other sites More sharing options...
Author Share Posted May 20, 2021 @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 More sharing options...
Share Posted May 20, 2021 Would it be possible to put together a minimal demo using scrollTrigger to demonstrate what you're trying to do? 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 20, 2021 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 More sharing options...
Author Share Posted May 20, 2021 @Cassie @mikel Can you guys understand what I'm trying to do? Look at this image below. I want to move these video svg from top to bottom endlessly. So it can create a scrolling effect. please help me achieving this effect. Link to comment Share on other sites More sharing options...
Share Posted May 20, 2021 Hey @Shahnwazh170, You could use the seamless loop ... See the Pen rNLBKYX by mikeK (@mikeK) on CodePen Happy looping ... Mikel 1 Link to comment Share on other sites More sharing options...
Share Posted May 20, 2021 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted May 20, 2021 Thanks a lot @mikel and @Cassie. You guys are awesome. 2 Link to comment Share on other sites More sharing options...
Author Share Posted May 20, 2021 Hey @mikel @Cassie, I almost got it working. But there are some issues can you please help See the Pen abJBeXJ by shahnwazh170 (@shahnwazh170) on CodePen Link to comment Share on other sites More sharing options...
Share Posted May 20, 2021 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! 4 1 Link to comment Share on other sites More sharing options...
Author Share Posted May 20, 2021 Thanks @Cassie Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now