Jump to content
Search Community

Append gradually

_Peter_ 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

I'm not 100% sure what you're asking, but you could certainly append an image into a div and not have it appear immediately. 


Using jQuery append(), the image would be added to the div, but you could use your CSS or GSAP set() to have it scaled at 0 to start or opacity of 0 etc... and then fade it in or scale it up. Pretty much whatever you want to do with it to make it visible.



  • Like 1
Link to comment
Share on other sites

Here's a quick little example:


The three boxes are appended at the same time (line 1 of the JS), but only the green one shows immediately because the style for the red and the blue have been set in the CSS ahead of time. After two seconds, they start to animate into view.


In the real world, you'd probably want to put the timeline and the append in functions and not let the timeline run until the append is complete because it would be trying to animate elements that don't exist yet. But, for the purposes of this goofy little demo, this works.


See the Pen PPgeZR by PointC (@PointC) on CodePen



Link to comment
Share on other sites

o.k. - you've lost me a bit in your question.


You have two divs and one contains an image and that image needs to animate to the other div?


There are many methods to grab the HTML or contents from another div, but any method of appending or cloning the image from one div to another isn't really going to animate the transition. If both divs are visible, couldn't you just use absolute positioning on the image and animate it to the other div? Are the divs next to each other? Are they the same size. Is the image staying the same size when it moves?


I'd like to give you better advice, but without seeing what you're trying to do, it's a bit difficult.


If you could make a CodePen example for everyone to see, that would get you the best answers.


If you haven't made a CodePen before, check this post by Carl on how to do it.




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