Jump to content
Search Community

ScrollTrigger reverse animation from middle of scroll until the end

jakob zabala test
Moderator Tag

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

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

 

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

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.

 

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

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

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...