Jump to content
Search Community

Beginner question move object

imagica test
Moderator Tag

Recommended Posts

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

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

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

  • Like 1
Link to comment
Share on other sites

 

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

 

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...