[GSAP Flip Problem with absolute position and z-index]

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!

[GSAP Flip Problem with absolute position and z-index]

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.

[GSAP Flip Problem with absolute position and z-index]

 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,
              })
            }

 

[GSAP Flip Problem with absolute position and z-index]

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

 

Any help is greatly appreciated!

See the Pen KKEmQLq by lisaschumann (@lisaschumann) on CodePen

[gsap business installation error (ERR! code E403 - You must be logged in to install/publish packages.)]

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 😑😅

[How do I create this morphing mask animation with GSAP?]

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

[Animate text from line to circle on scroll]

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☺️

[How do I create this morphing mask animation with GSAP?]

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?

[How do I create this morphing mask animation with GSAP?]

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

See the Pen oNGVXdL by lisaschumann (@lisaschumann) on CodePen

[How can I draw an SVG from its starting point to its full version?]

Thanks so much @PointC - it is working like a charm now...

 

See the Pen ZEXjRyJ by lisaschumann (@lisaschumann) on CodePen

[How can I draw an SVG from its starting point to its full version?]

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?

 

See the Pen ZEXjRyJ by lisaschumann (@lisaschumann) on CodePen

 

Absolutely love GSAP!

 

[How can I draw an SVG from its starting point to its full version?]

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!

 

 

See the Pen mdBjBge by lisaschumann (@lisaschumann) on CodePen

[Second ScrollTrigger animation start does not start at intended point + white space created by pin spacer]

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! 

See the Pen porzpRo by lisaschumann (@lisaschumann) on CodePen

[How to disable Scroll Trigger on scroll up]

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

[How to disable Scroll Trigger on scroll up]

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

 

[How to disable Scroll Trigger on scroll up]

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

[How to disable Scroll Trigger on scroll up]

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?:)

See the Pen qBjzVyj by lisaschumann (@lisaschumann) on CodePen

[How do I make image follow path on middle point]

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

[How do I make image follow path on middle point]

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.

 

 

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 

See the Pen JjbYLgg by ekfuhrmann (@ekfuhrmann) on CodePen

 

I'm sorry for so many question, I really appreciate your help!

[How do I make image follow path on middle point]

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" />

 

[How do I make image follow path on middle point]

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

 

See the Pen KKqMMoe by lisaschumann (@lisaschumann) on CodePen