Jump to content
Search Community

Pinned overlayed animations on scroll

scavaliere test
Moderator Tag

Go to solution Solved by Shaun Gorneau,

Recommended Posts

Hello everyone!
I am trying to make a sequential animation inside a pinned section where the plus icon finish to rotate from left to right and - when the animation is finished - the text block starts to appear till the end of animation. Now the animations seem to be synched.
I am using ScrollTrigger. 

Anyone can help? 

Thank you in advance!

See the Pen jOyXaam by scavaliere (@scavaliere) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @scavaliere,

 

A few quick things I notice (in general) that you'll want to fix up ... 

  • autoAlpha (as all properties are) is case sensitive. I notice your were typing `autoalpha`
  • opacity is affected by autoAlpha, so you should not define values for both properties
  • you mixed gsap and TweenMax. TweenMax is old syntax, you should only use gsap.method()

Now, for your specific issue, because you're wanting to establish some sequencing, you should use a timeline rather than a simple tween. Have a look here,

 

See the Pen XWpoqwJ?editors=1010 by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

Shaun

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