Jump to content
GreenSock

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

Dynamically created element

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

Hello, I am trying to add a dynamically created object via function into the master timeline. What I am trying to achieve is:

  1. create an element with unique ID
  2. make animation with it (it should fade in)
  3. destroy it

 

I can create it and destroy it, but I am not able to animate it right now. Any ideas why this code doesn't work?

See the Pen vPgbJv by MannySVK (@MannySVK) on CodePen

Link to comment
Share on other sites

I see several problems:

  1. You're initially setting "name" to a generic object...and animating autoAlpha on that object. Then, when that animation starts, you're reassigning the "name" variable to something completely different (a jQuery object). Are you thinking that would somehow get swapped into the previously-created tweens as a replacement target? If so, that's not how JavaScript works. 
  2. You're removing an element in an onComplete, but then it looks like you've got the animation infinitely repeating but you're never adding it back into the DOM, so you'll never actually see it again after the first iteration. See what I mean? 
  3. You're referencing a "tl" variable as if it's in the global scope. It'll technically work, but I'd recommend against that type of thing - you'll likely run into trouble eventually. I think you meant to declare "tl" as a local variable inside that function (you forgot the "var" keyword). 

I'm really not sure what you're after with the whole repeating stuff, but here's a fork that might nudge you in a better direction: 

 

See the Pen c7379946da795d1cac9a99641a6d4c99 by GreenSock (@GreenSock) on CodePen

 

Does that help?

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Well, I understand what you mean by points 1 and 2. I am trying to make this:

image.png.c2cd45497872a60d08130da00dc57b75.png

 

  • the grey line represents master line
  • red, blue, green and orange lines are randomly faded elements - their duration is random (longer the line is, the longer duration is)

Now, I am trying to understand how to code this type of animation properly, so I started with idea of master timeline that has function-generated timeline inside. But I can't imagine how to do that simultaneously (as it is on the picture).

Link to comment
Share on other sites

Yep, @PointC is right on. I'd definitely recommend getting familiar with the position parameter - it should make all this pretty easy. 

 

I'm not sure exactly how you're trying to randomize things, but here's a fork where I have 4 elements fade in and then out with randomized durations between 1 and 2 seconds, and put them into the timeline at randomized positions between 0 and 2. Feel free to adjust however you see fit. 

 

Happy tweening!

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