animationmagic

Thanks so much to @Rodrigo, @mvaneijgen and you @GreenSock for helping me understand the concepts here. I am wondering if zIndex as one of the optional properties should be remove from the documentation here https://gsap.com/docs/v3/Plugins/Flip/ in that case, as it cannot be set here. I now made my animation work and it's looking great! Thank you!

I found out that if I write the onComplete like this it returns this as the Tween. onComplete: () => { console.log(this) } while when I write it with this syntax this returns the Vue instance for me onComplete: function() { console.log(this) } Then my second question is resolved:) and I would just like to understand why zIndex directly on Flip.fit() does not take effect but setting it on the onStart works.

Hey @mvaneijgenthanks for coming back to me so quickly! This works great. Is there a reason using zIndex directly with Flip does nothing but setting it on onStart works? On other issue I have with the setup you proposed is that I need to set the zIndex back to 1 on animation complete but it cannot find this.targets()[0] in the onComplete. onStart: function(){ gsap.set(this.targets()[0], { zIndex: 99, }) }, onComplete: () => { gsap.set(this.targets()[0], { zIndex: 1, }) }

Hi there, I just tried out Flip and must say, I love it! I've tried to build a webpage with two container and want one of them to fill out the whole main container on animation. The h2s in my build have to have z-index=50 for another animation. My issue is, that even though I set the zIndex here to 99 it does not take effect. Flip.fit("#box-two", ".main-container", { duration: 0.5, ease: "expo.inOut", absolute: true, zIndex: 99 }); Here is a demo of what I am trying to do https://codepen.io/lisaschumann/pen/KKEmQLq Any help is greatly appreciated!

I'm having the same issue, when trying to npm install gsap in my new nuxt project. I keep getting "Cannot find module 'gsap/ScrollTrigger.min.js'" even after I followed all above steps. Could the issue be that I had originally used "npm install ./gsap-bonus.tgz" and then reverted to the above? I tried everything from left to right now ??

@OSUblake Thanks so much, this worked like a charm. Really appreciate your help!

Hi @Cassie! What setting would you have to use to have the text on the line morph into the circle but kind of 90deg further along the circle so it sits on top of it. Thanks so much☺️

Thanks for your reply @OSUblake - I thought about that but they you could only move between those two states, right? Is there a way to create a random clip-path?

Hi there! I'm trying to create this kind of animation, a morphing mask over an image: https://www.nikki-kay.com/ It seems like this is a lottie animation. What way would you suggest, if I wanted to recreate this with GSAP? A morphing mask, or a clip path? Ideally I want to add more animation layers around it, so not sure if a lottie animation would be best. Thanks so much for your help! Lisa

Thanks so much @PointC - it is working like a charm now... https://codepen.io/lisaschumann/pen/ZEXjRyJ

Hi @PointC, Thanks so much for your help. This is great! I added it in, but it seems I am missing something since the right leaf comes in from way to the right side. Am I missing something on the transformOrigin? https://codepen.io/lisaschumann/pen/ZEXjRyJ Absolutely love GSAP!

Hi there, I'm trying to have the leafs of the logo grow like in this gif, but I am struggling to make it scale from the origin point and draw it. Thanks for your help! Image from iOS.MP4

Hi everyone! I've got 2 issues: 1. The second ScrollTrigger animation on my page (the purple section) has their markers off. Although it is set to start "top 0" it starts way below. 2. The second animation has lots of white space underneath it created by the pin spacer. Is there a way to hide that scroll space? Thanks so much!

That makes sense! Thanks for your help @akapowl - saved the day:)

Thanks so much @akapowl that works GREAT. When I enable smooth scrolling with it, it seems to be causing an issue though. Did that happen to you before too? I think I can disable smooth scrolling for now, but would be great to know how you deal with it:) https://codepen.io/lisaschumann/pen/qBjzVyj

@akapowl thanks so much that works great and now the animation stops once you've scrolled through once:) Loving the dogs! Once the animation goes to the onLeave function it jumps to the next section underneath though. Is there a way to avoid that jumping?

Hi there, I'm trying to have this ScrollTrigger animation run only once when the user scrolls down the first time. When they scroll back up, all elements are meant to be static without any animations anymore. Basically, I only want to have the animation on scroll work only once. When I use once: true however it adds all the white space above the section on scroll up. Can you help?:)

@nico fonseca thanks so so much for this! super helpful. Loving the waves too! And thank you @GreenSock for pointing me to the other thread.

Thanks so much Jack for such a detailed explanation. I feel like I'm understanding a bit more. I then thought it might be a solution to create all SVGs in one illustrator file and export that so that it would all be within the same viewbox, but that seems to have made it worth, and I feel as though I'm missing the understanding of how I would center items within the SVG in the middle. https://codepen.io/lisaschumann/pen/KKqMMoe Earlier I only got the light to fit near the middle by nudging it and then exporting it again in Illustrator. Also, my line is still jumping when it repeats rather than flowing like in this demo https://codepen.io/ekfuhrmann/pen/JjbYLgg I'm sorry for so many question, I really appreciate your help!

Thanks for the warm welcome @nico fonseca That's brilliant, now it is moving along to the middle. How come I have to setting the start to 0.5 makes sense to me, but how come I have to set the end to 0.5 - 0.33? Also, I'm struggling to use my own path for the line, but when I replace the current path with it, the van does not follow it anymore. I don't quiet know why:/ <path id="line" d="M0,251.32C59.82,242,144.24,236.61,205,247c24,4.11,51.08,16.94,93.28,17.46,51.08.62,85.58-13.89,110.91-21.77,46.78-14.55,71.87-9.48,225,4.42,154.49,14,231.73,21,263.29,20.4,157.16-3.08,161.25-38.87,254.58-20.52,107,21,131.36,73.93,210.74,60.61,63.78-10.7,66.12-50.36,142.89-69.32,65.67-16.23,129.58.42,193.86,8.47,92.31,11.57,189.23,6,280.72-8.29,292.41-45.49,315.9,15,621.94-1.28,293.86-15.63,282.72-46.8,401-24.71,151.74,28.35,230.58,91,380.35,64,56.7-10.22,79.74-21.4,168-37.43,69.39-12.61,149.91-9.39,220.58-9.3,52.95.07,131.22-1.76,227.87-4.31" style="fill:none;stroke:blue;stroke-linecap:round;stroke-width:10px" />

Hi there, I'm trying to build a seamless animation where my van image is centered in the middle with its light, and it is following the line. The white dot at the left is from another codepen: https://codepen.io/lisaschumann/pen/KKqMMoe which I used as a starting point. That point follows the path perfectly, but whenever I try to make my van follow the path in the middle it still takes the path position (-33%) Also, when I try to add my own path, it destroys the animation even more. I would like to use this as my own path <path id="line" d="M0,251.32C59.82,242,144.24,236.61,205,247c24,4.11,51.08,16.94,93.28,17.46,51.08.62,85.58-13.89,110.91-21.77,46.78-14.55,71.87-9.48,225,4.42,154.49,14,231.73,21,263.29,20.4,157.16-3.08,161.25-38.87,254.58-20.52,107,21,131.36,73.93,210.74,60.61,63.78-10.7,66.12-50.36,142.89-69.32,65.67-16.23,129.58.42,193.86,8.47,92.31,11.57,189.23,6,280.72-8.29,292.41-45.49,315.9,15,621.94-1.28,293.86-15.63,282.72-46.8,401-24.71,151.74,28.35,230.58,91,380.35,64,56.7-10.22,79.74-21.4,168-37.43,69.39-12.61,149.91-9.39,220.58-9.3,52.95.07,131.22-1.76,227.87-4.31" style="fill:none;stroke:blue;stroke-linecap:round;stroke-width:10px" /> Any help is massivly appriciated!