Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jakob zabala

ScrollTrigger reverse animation from middle of scroll until the end

Recommended Posts

Easy question, hard to articulate.

 

I am using to tween which might be wrong (I am new to gsap... but love it)

I want to have this animation end where I have the marker, then continue to scroll will animate it back to its original position. Similar to yoyo effect in normal tween but can't seem to find it for scrolltrigger.

 

Do I need to create a timeline which plays a fromTo tween that reverses back to original values? 

See the Pen WNodwQX by jaykobz (@jaykobz) on CodePen

Link to comment
Share on other sites

function init (){
  
    ScrollTrigger.defaults({
    toggleActions: "restart pause resume none",
    });
  

// your code

 

You can add toggleActions to your tweens.

Alternatively you can add it to defaults and put at the top of init()

 

image.png.3ff3a51b175adfcba7cb98b19ad3c6f4.png

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

  • Like 3
Link to comment
Share on other sites

There are a few different ways to create this sort of thing that allow for slightly different results:

  • Use toggleActions as tailbreezy mentioned. This will play the full animations when entered/exited.
  • Use a single timeline that has both the enter and exit animations in one. Then scrub through it.
  • Use a pair of ScrollTriggers per section to do this sort of thing (found in the ScrollTrigger demos section😞

    See the Pen wvMeNee by GreenSock (@GreenSock) on CodePen

 

I also highly recommend my article about animating efficiently some of the points would help you shorten your existing code greatly. Happy tweening!

  • Like 1
Link to comment
Share on other sites

See the Pen WNodwQX by jaykobz (@jaykobz) on CodePen

 

Here I think I got it working how I like, but on the first scroll down, divs are already animated then when you scroll back up and down again the glitch goes away. Is this a refreshing issue?

 

Also I don't know what the start + end triggers for the hoodie are not in the same spot as the start end for the card. 

Link to comment
Share on other sites

18 minutes ago, jakob zabala said:

Here I think I got it working how I like, but on the first scroll down, divs are already animated then when you scroll back up and down again the glitch goes away. Is this a refreshing issue?

No, it is a logical issue. 

 

I recommend the second approach that I listed above:

3 hours ago, ZachSaucier said:
  • Use a single timeline that has both the enter and exit animations in one. Then scrub through it.

That way this logical issue is avoided :) It'd also be a lot simple (just create the timeline that does the animations that you need then attach a ScrollTrigger with a scrub to it).

Link to comment
Share on other sites

Thanks for the great advice, I will bring this all over to a time line and see if I can do it correctly

Link to comment
Share on other sites

Let us know if you run into any issues!

Link to comment
Share on other sites

Thank you Zach, you helped me get there. 

 

the final solution is here incase anyone needs it:

See the Pen WNodwQX by jaykobz (@jaykobz) on CodePen

  • Like 1
Link to comment
Share on other sites

I actually have one question, I am using to tweens in the entire timeline. why doesnt a from tween when animating back to original not work, I will change the code in the codepen to explain what i mean.

 

This is not a big issue, it just means i have to set the animateOut values to the original position which can be time consuming. instead i thought using a from just means, from this position take all the values back to the CSS code.

 

See the Pen WNodwQX by jaykobz (@jaykobz) on CodePen

Link to comment
Share on other sites

4 minutes ago, jakob zabala said:

I will change the code in the codepen to explain what i mean.

Going forward, can you please click the "fork" button before editing demos that you've already posted to our forums? That way context is not lost for future readers (including myself right now trying to compare the old and new code).

 

I'm not quite sure what you're asking given I can't see both versions. But to add some explanation, by default a .from() tween will immediately apply the starting styles. You can change this behavior by setting immediateRender: false in the vars. However, if disable immediate rendering then you might see a jump when the tween starts. Does that answer your question?

  • Like 2
Link to comment
Share on other sites

Ah, I understand how. The issue boils down to a misunderstanding of how .from() works: 

 

In your second demo, you first have a .to() tween which would animate from whatever the current values are to the given values. But since you have a .from() tween affecting the same properties of the same elements right after the .to() tween, the .from() tween values apply immediately (as I explained in my last post). Then it animates to the starting (before GSAP has done anything) values during the animation. 

 

Your .to() only approach works because it animates to the given values in the first tween then animates to the target values in the second tween. So the state isn't set to the target .from() values. The way that you have it is the proper way to handle this situation.

 

Side note: You shouldn't apply a CSS transition on the same properties of the same elements that you're animating with GSAP. That causes some jankiness.

  • Like 3
Link to comment
Share on other sites

Thank you for clearing that up. Makes sense, from my limited previous knowledge of gsap, i thought.from() worked differently.  

Yes, thank you for the CSS tip, I noticed it adds odd effect.

 

On a slightly different note, the translate z is not working for my solution on mobile. Am I missing something that is causing this bug?

Link to comment
Share on other sites

23 minutes ago, jakob zabala said:

the translate z is not working for my solution on mobile

Are you saying that the z transform is not being added? Did you confirm that this is the case using your dev tools?

Link to comment
Share on other sites

So I confirmed that the z is changing in dev tools but not actually transforming the z axis. I have some images of z axis not working attached bellow.

 

(I just tested the z axis by cranking the transform z by +1000... and on desktop view it works but on mobile it does not change anything)

(last image attached is the z +1000)

Screenshot 2021-02-25 at 17.22.40.png

Screenshot 2021-02-25 at 17.22.49.png

Screenshot 2021-02-25 at 17.28.45.png

Link to comment
Share on other sites

If it works on desktop and you can see the setting applied on mobile. It could be a media query issue.

  • Like 1
Link to comment
Share on other sites

55 minutes ago, jakob zabala said:

I confirmed that the z is changing in dev tools but not actually transforming the z axis

That means it's a browser-level issue. What browser are you testing in? Have you tested in other mobile browsers? Keep in mind that all iOS browsers are Safari-based...

  • Like 1
Link to comment
Share on other sites

Yes, it was an overflow hidden in one of the media queries for smaller screensize. The z axis animations was the only one effected so I assumed it was a mobile phone thing. Thanks!

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.

×