Tween animation on JQuery html replacement

[Thimey]

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.

 

JS:

$('.content-container').click(changeHtml);

function changeHtml () {
        var newHtml = `
            <div class="changing-content">
               //Some new content is interpolated here from an object
            </div>
        `;
        $('.content-container').html(newHtml);
}

HTML:

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

Any help will be greatly appreciated!

 

Cheers

[Jonathan]

Hello Thimey and Welcome to the GreenSock forum!

 

That can be accomplished in various ways.

 

Like using a from() tween:

 

https://greensock.com/jump-start-js#from-tween

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/

• 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 :

 

https://greensock.com/jump-start-js#basic-tween

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/

• 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?

 

https://greensock.com/jump-start-js

• 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!

[Thimey]

Hi!

 

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!