Change element position and resize with ScrollTrigger

[mdtrndprsn]

Hey! 

 

I'm currently working on a client website in Elementar for them to customise their content later on. 

 

I have to get the big star shown in the screenshot to animate down where the smaller blue star is and resize it at the same time. 

 

When scrolling the star has to change its position - resize - and stay as a fixed item.

 

So that I can remove the second smaller one at the bottom of the page. The star will be a fixed position image which will open a pop up when clicked at the bottom of the page.

 

I may be able to do all that with ScrollTrigger but I just can't seem to figure out how unfortunately  

 

Thank you in advance for the help!  

 

for anyone maybe needing the link here it is

[Rodrigo]

Hi @mdtrndprsn and welcome to the GreenSock forums.

 

This seems like a perfect job for GSAP's Flip plugin:

https://greensock.com/docs/v3/Plugins/Flip

 

Here is an example of how you can flip between two different elements:

See the Pen XWKLYWe by GreenSock (@GreenSock) on CodePen

 

All you have to do is have both stars in the DOM (the blue one has to be hidden for obvious reasons) and flip between them. Then create a ScrollTrigger instance that triggers the Flip event at different points. Here is a live example:

See the Pen RwJPbRR by GreenSock (@GreenSock) on CodePen

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

[mdtrndprsn]

Thank you for your warm welcoming @Rodrigo!

 

I didn't think of that at all! I'm going to give it a try - thank you very much!  

[mdtrndprsn]

On 10/27/2022 at 7:00 PM, Rodrigo said:

Hi @mdtrndprsn and welcome to the GreenSock forums.

 

This seems like a perfect job for GSAP's Flip plugin:

https://greensock.com/docs/v3/Plugins/Flip

 

Here is an example of how you can flip between two different elements:

 

 

 

All you have to do is have both stars in the DOM (the blue one has to be hidden for obvious reasons) and flip between them. Then create a ScrollTrigger instance that triggers the Flip event at different points. Here is a live example:

 

 

 

Hopefully this is enough to get you started. Let us know if you have more questions.

 

Happy Tweening!

 

Hey @Rodrigo! 

 

Thank you very much again for your help - now I figured it out how to hide or show the elements on scroll with Flip & ScrollTrigger!  

 

but I just can't seem to figure out how to animate those with ease & maybe even a scale animation. 

 

Would you mind helping me out one more time?  

 

Here is the CSS - I just changed a bits and pieces from your provided example....

.big-star.active {
  visibility: hidden;
}

.little-star {
    visibility: hidden;
}
.little-star.active {
  visibility: visible;
}
.big-star, .big-star.flipping {
  visibility: visible;
}

....the same goes for the JS code!

 

gsap.registerPlugin(Flip);

const bigStar = document.querySelector(".big-star"),
      littleStar = document.querySelector(".little-star");

const doFlip = () => {
  const state = Flip.getState(".little-star, .big-star");

  bigStar.classList.toggle("active");
  littleStar.classList.toggle("active");

  Flip.from(state, {
    duration: 0.3,
    fade: true,
    absolute: true,
    toggleClass: "flipping",
    ease: "power1.inOut"
  });
};
 
 
 ScrollTrigger.create({
  trigger: "#flip-maybe",
  start: "top 30%",
  end: "top 40%",
  markers: true,
  onEnter: doFlip,
  onEnterBack: doFlip,
});

I'm sorry I can't really provide a minimal demo as this would certainly help in debugging

 

Here is the link again for the live site if you need it! 

 

thanks again for the help and wish you and the Greensock team an awesome evening/day!

 

[Rodrigo]

Mhh... Yeah this seems to be more related to SVG than anything else. Using two .svg images doesn't create the problem but maybe that is not an option in your case.

 

What you could do is wrap both SVG elements in a <div> and flip those instead of the SVG elements:

See the Pen RwJPbRR by GreenSock (@GreenSock) on CodePen

 

In the example I'm flipping the div elements and the SVG naturally scales up/down as the elements are being flipped. You should also add a rotation in order to emulate the final position of the star.

 

Let us know if you have more questions.
 

Happy Tweening!