Syntrix

Thanks @akapowl That got the job done ?

I am trying to get a Lottie animation to play in a GSAP timeline. In the scripts section, the 'Path' i have one json file commented out which does work, but the animation path i copied from https://lottiefiles.com/web-player?lottie_url=https%3A%2F%2Fassets4.lottiefiles.com%2Fprivate_files%2Flf30_ox0nrliv.json does not play. However, it is being added to the container. How do i get it to play? Any help i would be grateful.

Hey @nico fonseca, thank you for taking the time to solve my problem, I really appreciate your help. That is exactly the outcome i was after. ? Sorry, i just looking closer at the code and its nearly there but not quite lol. If you export the codepen you modified and change the transition time below to 10 seconds you see what i mean gsap.to(clone, 0.3, style) you'll see the inner-content is fading to an opacity of 0 in 0.1 second but not on the cloned tile when the transition is taking place. Is there a way to have the content fade out on the cloned tile? tlout.to(content, { duration: 0.1, opacity: 0 }, "<"); The rest is perfect!

Thanks, I have updated the codepen to make it more clear. Unfortunately your solution adds the active class to all of the tiles. I only want the active class added to the tile that is clicked whilst it is animating. If you click a 'tile' and then click 'close' you see all 4 of tile's content fade in together when it should only be the one that is clicked. Hope that makes sense?

I have solved my own problem and updated the codepen by animating the cloned tile by adding the code below. Thanks for everyone's help. let cloneAnimation = clone.querySelector('.tile .inner-content'); gsap.to(cloneAnimation, { duration: 2.0, opacity: 0 })