Tilt effect with ScrollTrigger plugin

[ghisleouf]

Hi guys,

 

I'm new here and I wanted to ask a question about creating a quite simple animation with ScrollTrigger plugin.

I would like to create a "kind of" tilt animation on an element.

 

I created a very approximative pen just to have a starting point ..sorry ... it is not my current project.

 

Actually, what I would like to do is to create a scroll animation where my picture scale size varies from 1.5 to 1 when it comes to the center of the viewport (from the bottom) and then scales down from 1.5 to 1 when leaving the viewport on scroll.

 

if you have any advice to achieve it properly ... that would be perfect !!!

 

Thanks for your help.

 

Best regards 

 

See the Pen wvrreoW by ghislefou (@ghislefou) on CodePen

[OSUblake]

Welcome the forums @ghisleouf

 

Have you check out the new keyframes features added in v3.9? 

 

 

You could define all your scale values in a single tween like so...

 

gsap.to('.tilt', {
  // scale: 1.5,
  keyframes: {
    scale: [1.5, 1, 1.5]
  },
  ease: "none",
  scrollTrigger: {
    trigger: '.wrapper',
    scrub: true,
    markers: true
  }
})

 

[ghisleouf]

Thanks @OSUblake!

 

It works like a charm!

 

That's perfect.