Jump to content
Search Community

ScrollTrigger Opacity Animation

Christiemade test
Moderator Tag

Recommended Posts

 

Hey Christie,

 

You are creating .to() logic issues here - that is actually one of the most common ScrollTrigger mistakes.

 

Quick fix:

Add immediateRender: false to that second .to() tween on your #img_2 - more generally speaking on any later .to() tween which targets the same element, tweening on the same properties you have tweened on before. Or alternatively follow one of the other suggestions mentioned in the linked article.

 

This should work better now.

 

See the Pen 9b1d76914946fb2e780a10a76a52bc9c by akapowl (@akapowl) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Derp! Thank you!

I would like to try converting to a timeline, as I think that makes the most sense, but I'm not sure where to put the different triggers.

 

gsap.timeline({
  scrollTrigger: {
    trigger: '.section02',
    scrub: true
  }
})
.to('#img_2', {
  opacity: 1
})
.to('#img_2', {
  opacity: 0
});

Would the .section trigger definitions go within each .to() ? Or does the first timeline variable become an array of scrollTriggers? 🤔

Link to comment
Share on other sites

 

18 hours ago, Christiemade said:

Would the .section trigger definitions go within each .to() ? Or does the first timeline variable become an array of scrollTriggers?

 

Your first idea here is actually another of the most common ScrollTrigger mistakes and I don't think a timeline object can have multiple scrollTriggers.

 

You'd have to set the trigger to the initial point you want the timeline to start and the end(trigger) to the endpoint and work your way through the timeline via adjusting the durations and position parametes of your individual tweens. For your example that would look something like this (I added a tween on the heading to clarify the concept a bit more). 

 

Understanding how durations and the position parameter work on tweens with scrub applied will be very helpful with that regard.

 

See the Pen 7e76da486b25bef0135e971af5ccd354 by akapowl (@akapowl) on CodePen

 

  • Like 2
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...