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

[div138]

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!

 

 

[Rodrigo]

Hi @div138 and welcome to the GreenSock forums.

 

You're just missing a comma in the code :

tl.from(targetElement, {
  width: "100%",
  y: "90%" // <- MISSING COMMA HERE ;)
  duration: 1
});

In fact the browser was actually warning you about it:

Uncaught SyntaxError: Unexpected identifier 'duration' (at (index):225:5)

 

It's always a good idea to check the dev tools console first

 

Happy Tweening!!!

[div138]

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