[Installing GSAP ScrollSmoother in Webflow]

@GSAP Helper Thanks for the reminder of the link. I just took down the first photo. 

 

@GSAP Helper & @Geoff Dawes Thank you both so much for the help! 

 

@Geoff Dawes Thanks for the step by step instructions, I would've never thought to rename the file with a .txt extension! That helped a ton!

[Installing GSAP ScrollSmoother in Webflow]

Hey @Geoff Dawes can you post what gave you the light bulb moment? I'm still having trouble trying to link Scroll Smoother. I watched the <script> tutorial on the site and my site is still not working. Btw in the second image code sandbox keeps correcting my '#smoothwrapper' to double quotes. In the tutorial Green Sock had she used single quotes. Don't know if this may be the issue?

 

Also I am using Webflow. I was going to pull the file from dropbox, unless you could recommend a better efficient way?

 

I have both ScrollSmoother and Scroll Trigger registered. Any help or links to other videos is appreciated. 

 

 

 

 

Thanks!

[GSAP not working in my Webflow site? Seems like I tried everything.]

@Rodrigo Thank you so much! For some reason I thought I put a coma there but then I missed it. I appreciate it! I attempted to use the console but ended up giving up at looking at it cause it wasn't making sense to me. Now I'm starting to connect more dots. Thanks again!

 

[GSAP not working in my Webflow site? Seems like I tried everything.]

For some reason whenever I try to use GSAP animations on my site it does not work. I felt like I checked everything. I double checked it on a new fresh Webflow site too. I am following the steps provided in the youtube link below. I have deleted and rechecked multiple times. I've tried putting the code in the project setting tab where you can insert code and also the embed feature that Webflow has. I made sure to put code in the "before</body> tag". Code I used is below.

 

Any help is supppppper appreciated thank you so much!

 

Code used:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  markers: false
});

// Animate From
$(".section_home_intro").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, {
    width: "100%",
    y: "90%"
    duration: 1
  });
});

</script>

 

 

Webflow site-link:

https://ratunuman-com.webflow.io

 

Youtube Tutorial I'm following:

https://youtu.be/x-BVEhyYW50

 

 

Please let me know if there is any other details I could provide. 

Thank you again!