Jump to content


Tween animation on JQuery html replacement

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 everyone,


I am a bit new to GSAP, so forgive me if this is a silly question.


I am trying to add a leaving animation and enter animation on html content that I am replacing with Jquery's .html() method. When I click the element, the contents of that element is replaced with new content that is contained within a div with class="changing-content".


I would like the old content to animate off the screen and the new content to animate onto the screen.




function changeHtml () {
        var newHtml = `
            <div class="changing-content">
               //Some new content is interpolated here from an object


<div class="content-container">
   //new content goes here

Any help will be greatly appreciated!



Link to comment
Share on other sites

Hello Thimey and Welcome to the GreenSock forum!


That can be accomplished in various ways.


Like using a from() tween:





  • from() you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.

or using a to() tween :





  • to() Static method for creating a TweenMax instance that animates to the specified destination values (from the current values)

Have you looked at the GSAP Jump Start Playground?



  • Do you have any GSAP code example of what you have tried so we can see your code example in context?
  • What type of leaving and entering animation are you looking to do?
  • Does it just fade out and move off the screen?

Here is a video tut on how to create a codepen example.

This way we can test your code live on codepen to better help you!


Any additional info will be greatly appreciated!

Thanks! :)

  • Like 1
Link to comment
Share on other sites



Thanks for getting back to me.


Yes, I had a look a the to and from methods and thought this was the obvious answer, but could not get it to work. 


I suspect that everytime I replace the html inside the content-container, I am removing a reference to the element to the dynamic-content div. Therefore, I thought it might work by getting a new reference on the click handler function, but still no luck.


Here is a link to a demo on codepen:

See the Pen oLOLxj?editors=1111 by Thimey (@Thimey) on CodePen


So when I click on the content, I want it to randomly populate the div with content from the array and transition with an animation --> Fade out to the left and Fade in from the right.


Thanks for your time!

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.