flim Posted November 17, 2021 Share Posted November 17, 2021 I want the element to show in the animation "end" position when it is already on the screen, i.e. after page loaded. For instance, in the codepen, change the zoom to "0.25x", "b" will be visible, "b" will start to play just if I run the codepen again. How to make "b" start in the animation end position if it is visible already? Like when "b" is visible after page loaded, the tween duration is "0". See the Pen abyRXVb by fredericklim (@fredericklim) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted November 17, 2021 Solution Share Posted November 17, 2021 Hi flim, Check out the new .isInViewport() method. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport() So if it's in the viewport, just set the animation's progress to 1. if (ScrollTrigger.isInViewport(myElement)) { myAnimation.progress(1); } 2 1 Link to comment Share on other sites More sharing options...
flim Posted November 17, 2021 Author Share Posted November 17, 2021 3 hours ago, OSUblake said: Hi flim, Check out the new .isInViewport() method. https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport() So if it's in the viewport, just set the animation's progress to 1. if (ScrollTrigger.isInViewport(myElement)) { myAnimation.progress(1); } Hi OSUblake, Thanks for the advice, I shall read the doc more carefully. Here is my trial, if I change the zoom to 0.25x, the element 'b' will be at the end position, change the zoom to 1x the normal scroll animation resume. See the Pen NWvewXE by fredericklim (@fredericklim) on CodePen It is not perfect, the animation position will jump to the end if I resize the viewport which is large enough to make the element in the viewport. Any advice? Link to comment Share on other sites More sharing options...
OSUblake Posted November 17, 2021 Share Posted November 17, 2021 If you want it to only run once, you shouldn't put it inside a callback. var animb = gsap.to(".b", { x: 400, rotation: 360, }); ScrollTrigger.create({ trigger: ".b", animation: animb, start: "top bottom", end: "bottom top", toggleActions: "play none none reset", }); if (ScrollTrigger.isInViewport(".b")) { animb.progress(1); }; 1 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