Dennyno Posted November 22, 2021 Share Posted November 22, 2021 Hi, Which could be the best way to replicate this Revolution Slider example?https://www.sliderrevolution.com/templates/app-studio-website/ Will it be enough to add scroll trigger to each .quadrato (random) item? Or does it require a timeline? Thanks for any hint See the Pen ExvJJqN by DedaloD (@DedaloD) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted November 22, 2021 Share Posted November 22, 2021 I would make the entire animation a timeline. Once you have your animation looking the way you want, just add a ScrollTrigger to your timeline and you should be good to go. Link to comment Share on other sites More sharing options...
Dennyno Posted November 22, 2021 Author Share Posted November 22, 2021 4 hours ago, OSUblake said: I would make the entire animation a timeline. Once you have your animation looking the way you want, just add a ScrollTrigger to your timeline and you should be good to go. Thanks so much. I did. Now how to make the iphone image and the triggered elements pinned till the animation ends? Actually gsap ends after the container is outside from the viewport... so sad! Link to comment Share on other sites More sharing options...
Dennyno Posted November 23, 2021 Author Share Posted November 23, 2021 I tried setting "pin:true" but the grid stays a bottom. Also 1 other thing: the result (even if we are talking about different transitions and animations) if slightly different: elements have like a overflow:y before starting animations, while on the demo.. elements are visible even before starting the animation (outside from the iphone screen). Which could the the problem? My markup? Thanks Link to comment Share on other sites More sharing options...
Solution OSUblake Posted November 23, 2021 Solution Share Posted November 23, 2021 10 hours ago, Dennyno said: Now how to make the iphone image and the triggered elements pinned till the animation ends? You can make your timeline longer by adding some dummy tweens to the end of it. ... tl.fromTo(".div26",{y:50,autoAlpha: 0}, {duration: .5, y: 0,autoAlpha: 1}); // add 1 second to the timeline tl.set({}, {}, "+=1"); 46 minutes ago, Dennyno said: I tried setting "pin:true" but the grid stays a bottom. It's going to start pinning when start passes the scroller-start bar. To pin it higher, you need to set the start to be higher. 1 Link to comment Share on other sites More sharing options...
Dennyno Posted November 23, 2021 Author Share Posted November 23, 2021 Solved. Thanks Hope this simple experiment may end under gsap featured reel 2 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