Jump to content
Search Community

Question about when CSS props are set

flysi3000 test
Moderator Tag

Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a sequence of functions (frame1(), frame2(), frame3(), etc.), that each return a timeline instance, which I then string together in a master timeline. All is good, for the most part, except that in the last frame(), I use .set() to move a div up by 35px in y. For some reason, that position change is happening when the master timeline first starts, as demonstrated in this pen: 

See the Pen epdmee by flysi3000 (@flysi3000) on CodePen

 

So, in this example, the image should start out at y = 0, and then at at the end of the animation, be set to y = -35, then slide in.

 

By the way, the image is clipped via the css clip-path property, and I am changing that clipping path's height to reveal more of the image in frame2().

 

Any idea why that's happening?

Link to comment
Share on other sites

  • Solution

What is happening you have explained quite well.

 

The .set() is being triggered right at the start of the master timeline.

 

As to why I can only speculate. What I see the reason being is because .set() is a 0 time event, there is nothing to use as a reference point when calculating its position. So, it happens instantly. However, if you tweak your code to have something happen before it or have set happen a second into the timeline, then, there is something to reference and you get the behaviour you were expecting.

 

I didn't fork anything because I am lazy but just add, 0.1 at the end of your .set() and you'll see pretty kitty's eyes.

 

You will have to ask the ALMIGHTIES for a more real reason why it happens. I can only offer what I think is happening. If you multiply anything by zero, you get zero.

Link to comment
Share on other sites

What is happening you have explained quite well.

 

The .set() is being triggered right at the start of the master timeline.

 

As to why I can only speculate. What I see the reason being is because .set() is a 0 time event, there is nothing to use as a reference point when calculating its position. So, it happens instantly. However, if you tweak your code to have something happen before it or have set happen a second into the timeline, then, there is something to reference and you get the behaviour you were expecting.

 

I didn't fork anything because I am lazy but just add, 0.1 at the end of your .set() and you'll see pretty kitty's eyes.

 

You will have to ask the ALMIGHTIES for a more real reason why it happens. I can only offer what I think is happening. If you multiply anything by zero, you get zero.

 

Amazing! Your theory works for me - let's go with that. Thanks for the suggestion!

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