imagica Posted May 8, 2022 Share Posted May 8, 2022 Hello, i want to move an object (red block) -100px up when the fullpage video scrolls down and want it to move back when the fullpage video is back at top. And then again when scrolled down .. the same again, move red block top -100px any help would be nice Link to comment Share on other sites More sharing options...
Cassie Posted May 8, 2022 Share Posted May 8, 2022 Hey there @imagica! Thanks for providing that snippet. Would you be able to pop the relevant code into a minimal demo for us too so that we can help you more easily? Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right - See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
imagica Posted May 9, 2022 Author Share Posted May 9, 2022 See the Pen KKQzPea by imagica (@imagica) on CodePen When scrolled down, the red block moves -100px up (this works). Now, when scrolled completely back top top, the red block should scroll down 100px again. And then start over again when scrolled down. EDIT: I managed it with toggleActions reverse but the problem is, i want want it to start fast and slow in the end but when "reversed" it goes slow at start and fast in the end, is there a way to change this? Found yoyo but it does not work... 😑 let tl = gsap.timeline({ yoyo: true, defaults: { duration: 3, ease: "power4.out" }, scrollTrigger: { trigger: ".box1", toggleActions: "play none none reverse" } }); tl.to(".box1", {y: -100,}) How can i do this? Marco Link to comment Share on other sites More sharing options...
Cassie Posted May 9, 2022 Share Posted May 9, 2022 Heya! Thanks for putting together that demo. yoyoEase sounds like a good solution actually. That article's using old syntax and I haven't used it myself so not quite sure if it's still part of GSAP3? Maybe someone will chip in, I would approach this by using tweens in the onEnter and onLeaveBack callbacks. See the Pen poayjbp by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
imagica Posted May 9, 2022 Author Share Posted May 9, 2022 Hey Cassie, thanks for that 😀 Just for interest... maybe someone knows the way with yoyo on scrollTrigger? Link to comment Share on other sites More sharing options...
OSUblake Posted May 9, 2022 Share Posted May 9, 2022 6 hours ago, Cassie said: That article's using old syntax and I haven't used it myself so not quite sure if it's still part of GSAP3? Maybe someone will chip in, What article? Link to comment Share on other sites More sharing options...
akapowl Posted May 9, 2022 Share Posted May 9, 2022 This one? ...looks to be just straight up syntax conversion. New... See the Pen wvyGedJ by akapowl (@akapowl) on CodePen ...vs old. See the Pen eWjQLV by GreenSock (@GreenSock) on CodePen It's still in the docs for GSAP3, too ...near the very bottom https://greensock.com/docs/v3/GSAP/Tween/vars yoyoEase Allows you to alter the ease in the tween's yoyo phase. Set it to a specific ease like "power2.in" or set it to true to simply invert the tween's normal ease. Note: GSAP is smart enough to automatically set yoyo: true if you define any yoyoEase, so there's less code for you to write. Default: false. Link to comment Share on other sites More sharing options...
OSUblake Posted May 9, 2022 Share Posted May 9, 2022 Ok, I updated that demo to the latest version. Link to comment Share on other sites More sharing options...
akapowl Posted May 9, 2022 Share Posted May 9, 2022 3 minutes ago, OSUblake said: Ok, I updated that demo to the latest version. But now there's a demo with GSAP3 syntax in the article with TweenMax syntax - isn't that more misleading? 🙈 ...and to add something to the actual question: 6 hours ago, imagica said: Just for interest... maybe someone knows the way with yoyo on scrollTrigger? I'm not sure I'm seeing the whole picture, but I'm also not sure a yoyo and thus a yoyoEase would work on a ScrollTrigger with toggleActions, because technically you would actually be reversing a tween that was played forward before, and not be playing a repeat - and with the actions that can be used in toggleActions ("play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none") I don't think that would be an option. So unless I'm missing something, Cassie's suggestion of handling it in different tweens that are being called via the ST's callbacks should be the way to go! Link to comment Share on other sites More sharing options...
imagica Posted May 9, 2022 Author Share Posted May 9, 2022 Thanks to all for pointing me to the right direction 👍 Link to comment Share on other sites More sharing options...
OSUblake Posted May 9, 2022 Share Posted May 9, 2022 46 minutes ago, akapowl said: But now there's a demo with GSAP3 syntax in the article with TweenMax syntax - isn't that more misleading? 🙈 I updated the syntax. Better? 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