Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
LK1037

GSAP Syntax for reusing an element

Recommended Posts

I'm trying to reuse an element in a timeline where [ thing1, thing2] reveals, sits for a second, then goes away. However, this only works once.

I've tried { repeat:3, repeatDelay:2} which only blinks 3 times rather than repeating in 2 second intervals.

 

Here's a snippet of my timeline...

 

.add( "f1")
.from( [ thing1, thing2], 0.5, { x:-7, autoAlpha:0, ease:Back.easeOut, scale:0.5}, "f1-=0.5")
.to( [ thing1, thing2], 0.5, { x:7, autoAlpha:0, ease:Power4.easeOut, scale:1.5}, "+=2")

 

.add("f2")

// thing3 comes in and goes away.

 

.add( "f3")
.from( [ thing1, thing2], 0.5, { x:-7, autoAlpha:0, ease:Back.easeOut, scale:0.5}, "f3-=0.5")
.to( [ thing1, thing2], 0.5, { x:7, autoAlpha:0, ease:Power4.easeOut, scale:1.5}, "+=2")

 

.add("f4")

// thing4 comes in and goes away.

 

.add( "f5")
.from( [ thing1, thing2], 0.5, { x:-7, autoAlpha:0, ease:Back.easeOut, scale:0.5}, "f5-=0.5")
.to( [ thing1, thing2], 0.5, { x:7, autoAlpha:0, ease:Power4.easeOut, scale:1.5}, "+=2")

 

.add("f6")

// thing5 comes and stays put.

 

 

Share this post


Link to post
Share on other sites
3 hours ago, LK1037 said:

Here's a snippet of my timeline...

 

Great, now put that in a simplified demo. 

 

 

And try not to use .from() so much. You can't exactly do a from with autoAlpha: 0 if autoAlpha is already at 0. From 0 to 0 is 0.

  • Like 2

Share this post


Link to post
Share on other sites

Also this:

 

 

But I would just recommend not using .from() multiple times in a timeline with the same element(s).

 

  • Like 2

Share this post


Link to post
Share on other sites

Ah — immediateRender. That took care of it.

 

Thanks for your help.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×