Is this Scroll snap animation possible to achieve with ScrollTrigger?

[kadircakir]

Hello GreenSock Community,

 

First off I want to thank the whole community and the GreenSock team for the amazing help and support.

Your help has always been so impressive and memorable. I've definitely learned and achieved things I couldn't without you.

 

Stumbled on an animation recently which uses scrolling as a trigger.

What I would like is to recreate the snap on scroll video animation from the polestar.com website in my project.

The idea is that it needs to scroll snap into full width and when scrolling back comes back to it's original size.

And can I use the ScrollTrigger for the same text effect (from top down) as well?

 

This is my current project which wouldn't be possible without you guys.

Code I am using for another ScrollTrigger animation in my current project is;

 

<script>
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  markers: false
});

// Logo Scale
$(".section.is--hero").each(function (index) {
  let triggerElement = $(this);
  let targetElement = $(".nav_logo");

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "top top",
      end: "bottom top",
      scrub: 1
    }
  });
  tl.from(targetElement, {
    y: "-90%",
    width: "100%",
    duration: 1
  });
});

// Header Text Hide
$(".header_text-move").each(function (index) {
  let triggerElement = $(this);
  let targetElement = $(this);

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "-100% top",
      end: "30% top",
      scrub: 0.8
    }
  });
  tl.to(targetElement, {
    y: "100%",
    duration: 1
  });
});

// Sticky Circle Grow
$(".sticky-circle_wrap").each(function (index) {
  let triggerElement = $(this);
  let targetElement = $(".sticky-circle_element");

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "top top",
      end: "bottom bottom",
      scrub: 1
    }
  });
  tl.fromTo(
    targetElement,
    {
      width: "35em",
      height: "35em",
      borderRadius: "35em",
      duration: 1
    },
    {
      width: "100vw",
      height: "100vh",
      borderRadius: "0em",
      duration: 1
    }
  );
});

</script>

 

Hope there is a talented person who can help me achieve this animation in my Project.

Thanks in advance for the taken time and effort!

 

Please never change as you guys are simply great!

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[kadircakir]

I am not too code-savvy unfortunately and have implemented earlier GSAP interactions with help from others.

Would it be possible to analyse the interaction from polestar.com and give me advice on how best to achieve it?

 

So no issue at hand actually but more advice needed in achieving the animation with ScrollTrigger (if possible of course).

 

Hope I am communicating it clearly, if I can further assist with anything please let me know.

Any help would be really appreciated.

[kadircakir]

Maybe this can help?

Below you can find the code I have for what I have at the moment.

Just want it to snap on scroll like on polestar.com and go to original size when scrolled out.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>
gsap.to('.intro', {
  scale: 1,
  borderRadius: '0',
  ease: 'none',
  scrollTrigger: {
    trigger: '.intro',
    start: 'top bottom',
    end: 'top center',
    scrub: true,
  },
})

if (window.innerWidth > 768) {
  gsap.to('.section_intro', {
    ease: 'none',
    scrollTrigger: {
      trigger: '.section_intro',
      start: 'top top',
      end: 'center top',
      scrub: true,
      pin: '.section_intro',
    },
  })

}
</script>

 

Project is being developed in Webflow and have test in the read-only link below;

https://preview.webflow.com/preview/gsap-scroll-trigger-animation-00b03f?utm_medium=preview_link&utm_source=designer&utm_content=gsap-scroll-trigger-animation-00b03f&preview=6d49f7f967aadde31da3270c753af7f8&workflow=preview

 

Hope this helps.

[mvaneijgen]

Hi @kadircakir welcome to the forum!

 

We ask people to provide a minimal demo, so that we can jump directly in to the code. This way we don't waste resources setting demos ourself and thus we can help more people! 

 

I also think you learn more by trying out things for your self and really getting your hands dirty by writing code and breaking things. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

See these getting started resources, particularly check out the second link I think timelines are what you're going to need. Also keep in mind the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. 

 

Just try to get something to work on codepen and if you're stuck post back here with the code you've written, even not working code is helpful, because, that way we can see your thought process and thus better help you. 

 

✨ A demo speaks 1000 words ✨
 

[kadircakir]

Hi and Hoi van Eijgen,

 

Thank you for taking the time and explaining it further.

I really appreciate the extra care you guys offer.

 

Think I've managed to apply the code in CodePen.

See the Pen YzRgQmx by studiokc (@studiokc) on CodePen

 

Would this be of any help?

 

I want it to scroll out to the original position and have more of a real snap on scroll.

And what would you advice to have the size adhere to the html constraint instead of the 768px now.

Want to make it responsive for all screens by adjusting the size of the box with a container element which would have padding on horizontal axis to have more control on the size.

 

Thanks a lot and hope you have great weekend.

[mvaneijgen]

Ook hallo!

 

I've removed the 3000 lines of JS and moved the JS from the HTML panel. Scrub is a way to control an animation with ScrollTrigger, but if you set it to false an animation will just play. If you then create a really snappy animation (which I've tried with the power4.in ease and decreased the duration to 0.3 seconds), it will just play when the markers are triggered, which make if feel snappy.

 

See the Pen eYQXEZp?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

20 minutes ago, kadircakir said:

And what would you advice to have the size adhere to the html constraint instead of the 768px now.

Want to make it responsive for all screens by adjusting the size of the box with a container element which would have padding on horizontal axis to have more control on the size.

 

I'm not really sure what you mean with this. CSS layout is really important with GSAP. If your layout is responsive with out CSS it should all just work with GSAP. Also check out gsap.matchMedia(), which has some really nice build in features which work great with GSAP and ScrollTrigger  https://greensock.com/docs/v3/GSAP/gsap.matchMedia(). Hope it helps and happy tweening! 

[kadircakir]

Hoi again 

 

Thank you for providing an improved version.

The snap more like I wanted it to be (really snappy haha).

 

See the Pen ExOJWzm by studiokc (@studiokc) on CodePen

 

For it to be like the animation I want to recreate I need help with the following points.

1. When the div is fully visible (center or bottom as value?) reaches the snap to the sides can occur. (did I set it up correctly?)

2. When the user would scroll further it should revert the snap back to it's original state. (How would you advice I go about this?)

3. Is there a functionality wherein the snapping back would also occur if the playing video had ended. (would be in loop but after it ends once preferably)

 

How would you go about achieving this?

 

Thanks for suggesting gsap.matchMedia() as well, looks very interesting.

I will dive into this some more to see if how it can be implemented for this project.

 

I am learning a lot through the expertise of the GreenSock Staff.

My heartfelt thanks people.

 

 

 

[mvaneijgen]

1. How and where the end markers should be is something I can't advise you about, for me the bellow setup seems to work great, but you're the developer, so you need to figure out what works on the screen sizes of your visitors.
2. Check the toggleActions I've filed in https://greensock.com/docs/v3/Plugins/ScrollTrigger
3. Sure thing. I've created a timeline of you tween, personally I find this provides better separation of everything that is going to happen. I've also create a function that plays that timeline in .reverse() (the same as what the toggleActions do in the ScrollTrigger). The only thing you have to do is find a way to wait until the video has done playing and if that happens run that function something like 

4. // Pseudo code this is not tested
   document.getElementById('myVideo').addEventListener('ended', () => {
     // Video has finished playing, you can perform any actions here.
     onVideoHasEnded();
   });

 

Hope it helps and happy tweening!  

 

See the Pen gOQyWay?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[kadircakir]

You have definitely been of great help,

Thank you very much for the taken time and effort!