Can't get this custom code to work

Design help Custom code
1

Hey Guys,

I’m pretty new to webflow, just learning the ropes and startiing to look at custom coding animations into my websites. I’m wondering why this particular code isn’t working, it seems to make no difference to my website whatsoever. Can anyone explain why it might not be working?

<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
});

// Logo Animation
$(".Hero Image").each(function (index) {
  let triggerElement = $(this);
  let targetElement = $(".Brand.Moving");

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

Here is my site Read-Only:

2

The Hero Image class is most likely your problem since Webflow formats classes in the code so the class should be written as .hero-image in your custom code.

1 Like