Jump to content
Search Community

Add new object with .append then animate

Spiderian test
Moderator Tag

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

Hi,

 

I am having trouble getting my animation to fire after I create new slides. I am trying to make a train board that updates from xml data every 20 seconds or so.

 

1. Create new slides

2. Animate new slides in from above the "slotXX"

Futre steps:

3. Change div tag removing the "a" while changing z-index and removing hidden old slide

4. Repeat

 

If anyone can set me on the right direction many thanks will ensue. I don't mind if you just point me to a tutorial that's almost identical or if you want to fork my codepen.

See the Pen HzLqJ by Spiderian (@Spiderian) on CodePen

Link to comment
Share on other sites

Hi Ian,

 

I'm going to presume that your app has some kind of callback when the train data changes/updates. If so you can call a simple function to add the new elements to the DOM and then animate the collection.

 

Take a look at this sample by Chrysto, is very simple and straight forward, but does the trick very nicely. In this one you have a delayedCall() instance as a timer, but you can replace that to meet your scenario:

 

See the Pen LckBh?editors=001 by bassta (@bassta) on CodePen

 

What I would try is to update the info container adding the new trains and removing the old ones, and animating the elements down. Finally since your app works in one direction is quite easy to position the pass elements again, use an onComplete callback in order to set them back so you can animate it again. Finally when the DOM changes (new train is added/old train is removed) you'll have to update your collection or array in order to get the right elements, so you're not animating an element that is no longer in the DOM.

 

Hopefully this will be enough to get you started and if you have more questions keep firing them.

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Hi Spiderian

 

Rodrigo is right about delayedCall() , maybe this can help you :
 

See the Pen iDkes by anon (@anon) on CodePen

 

but dont forget GSAP use requestAnimationFrame and this means when user going to other tab the delayedCall stop calling , and If you don't want that behavior , u can use this " TweenLite.ticker.useRAF(false); " to turn off and use setTimeout() to drive . 

 

:)

  • Like 2
Link to comment
Share on other sites

Hello  Spiderian,

 

Too add to these fine gents great advice. Here is another example using GSAP as an image slider:

See the Pen qxsfc by jonathan (@jonathan) on CodePen

 

I also noticed in your example you have element with specific ID's .. but then in your JS you are trying to append other div elements with the same ID. ID's would need to be unique.. meaning only one element can have that ID namespace. I would recommended making them different so you don't have conflicts when trying to target specific ID's.

 

AncientWarrior, What you can also do is listen for when a user clicks on another browser tab or window using the HTML5 Visibility API .. and then pause() your animation when the events detect losing of focus. And then when the user returns to the page you can resume() the animation.

 

See the Pen sxgJl by jonathan (@jonathan) on CodePen

 

It uses the HTML5 Visibility API with GSAP to manage the focus of browser tabs and windows, to control animations pause() and resume() state

 

:)

  • Like 1
Link to comment
Share on other sites

 

I also noticed in your example you have element with specific ID's .. but then in your JS you are trying to append other div elements with the same ID. ID's would need to be unique.. meaning only one element can have that ID namespace. I would recommended making them different so you don't have conflicts when trying to target specific ID's.

 

 

I'm not sure what you're talking about. The js appending is the same id with an "a" at the end. rt01 -> rt01a. Your codepens don't seem to run.

Link to comment
Share on other sites

Your first example has an ID called #slot01 in the DOM.. and then you were appending a div with #slot01 again in your JS, found in your nextSet() function .. the same was for #slot01, #slot02, #slot03, #slot04

 

See the Pen FBjhk by Spiderian (@Spiderian) on CodePen

was changed so now #rt01a is appended multiple times also.. If you look at the DOM in the Browser inspector for your

See the Pen FBjhk by Spiderian (@Spiderian) on CodePen

..you will see multiple elements with same ID #rt01a being appended in the DOM. So you will probably need to remove those ID before appending again.

 

Those elements with same ID will cause conflicts when you try to target an element with the same ID. since it must be unique.

 

:)

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