Jump to content
Search Community

Chaining functions in GSAP 3.0

Pete Norris test
Moderator Tag

Recommended Posts

1 hour ago, Pete Norris said:

Looking to chain two very simple animations to play one after the other, however only the 'elevator_inside' function runs.

Both of them are running. You can check that by looking in your developer tools and looking at the elements being affected.

 

The issue seems to be that you have the yellow section layered over the other two so you can't see the animation visually. What are you trying to do?

Link to comment
Share on other sites

  • 2 years later...

Hi friends, is there a way to chain functions in the timeline, like this?
 

gsap.timeline()
.add( animateTitle('.hero--about h1') )
.add( animateImage('.hero--about img'), '<5' )

The above code is not working for two reasons: 1) the 2nd function start at the same time as the 1st one; 2) position '<5' doesn't work.

Is there maybe another GSAP function for this? Thanks

Link to comment
Share on other sites

Hello @Black Ducas, do you have a demo? I'm interested to see what animateTitle is returning. I would imagine that it would work if it's returning a tween. 

This may be a good use case for registerEffect and extendTimeline: true though... 👀

 

//with extendTimeline: true
var tl = gsap.timeline();
tl.yourEffect(".class", {configProp:"value"}, "+=position");

//without extendTimeline: true, you'd have to do this to add an instance to the timeline:
tl.add( gsap.effects.yourEffect(".class", {configProp:"value"}), "+=position");

 

Link to comment
Share on other sites

Hi @Cassie

I wanted to keep this question as simple as possibile. animateTitle function was just an example, it contains just a very simple gsap.from() tween like a fade in. It is a function that I have to use also in other contexts, like calling it outside a timeline.

 

export const animateTitle = (element) => {
  gsap.from(element, {...}); // Fade in animation on the passed element
}

 

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