Bohdan. Posted February 21, 2023 Share Posted February 21, 2023 Hi to all! I need to play the animation right away without scrub control. When the trigger fires - animation play with duration. gsap.timeline .from('.image', { opacity: 0, y: 80, ease: 'power2.ease', duration: 1, scrollTrigger: { trigger: '.image', start: 'top bottom-=10%' } }) .from('.image-2', { opacity: 0, y: 80, ease: 'power2.ease', duration: 1, scrollTrigger: { trigger: '.image-2', start: 'top bottom-=10%' } }) Is it possible to do this without onEnter callback and animation.play()? Thank You! Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted February 21, 2023 Solution Share Posted February 21, 2023 Hi @Bohdan. and welcome to the GreenSock forums! You are making one of the most common ScrollTrigger mistakes, which is nesting ScrollTriggers on tweens that are in a timeline: https://greensock.com/st-mistakes/#st-in-tl In this case is better to either create a ScrollTrigger configuration in the timeline instance or create two separate from tweens for each image: gsap.from('.image', { opacity: 0, y: 80, ease: 'power2.ease', duration: 1, scrollTrigger: { trigger: '.image', start: 'top bottom-=10%' } }); gsap.from('.image-2', { opacity: 0, y: 80, ease: 'power2.ease', duration: 1, scrollTrigger: { trigger: '.image-2', start: 'top bottom-=10%' } }); Hopefully this helps. If you keep having issues, please remember to include a minimal demo so we can have a better idea of what could be the issue. Happy Tweening! 3 Link to comment Share on other sites More sharing options...
Bohdan. Posted February 21, 2023 Author Share Posted February 21, 2023 @Rodrigo Thank you a lot! Your variant works as it should. I thought it was good to use Timeline for a few animations. That it will be more elegant ) Link to comment Share on other sites More sharing options...
Cassie Posted February 22, 2023 Share Posted February 22, 2023 Just FYI - A timeline is the right choice if you have a sequence of animations that are playing one after another. In that case you'd add the ScrollTrigger to the timeline itself, like so - gsap.timeline({ scrollTrigger: { trigger: '.image', start: 'top bottom-=10%' } }) .from('.image', { opacity: 0, y: 80, ease: 'power2.ease', duration: 1, }) .from('.image-2', { opacity: 0, y: 80, ease: 'power2.ease', duration: 1, }) Happy tweening! 4 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