Search the Community
Showing results for tags 'webflow'.
Found 2 results
-
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!
-
Hello! I'm very new to GSAP and Scrollmagic, but I'm wondering about how to do something specific. I will provide a link below, but basically what I'm wanting to know how to do is have an element tween to a specific point on scroll, then pause, then complete, the tween. Here is the code I'm using currently to make this happen: // Hockey Player Slide var tween = TweenMax.staggerFromTo(".hockey-boy", 1, {left: -600, opacity: 0}, {left: 800, opacity: 1, ease: Linear.ease}, .15); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#hockey-player", triggerHook: 0, duration: 2000, }) .setTween(tween) .setPin("#hockey-player") .addIndicators({ name: "Hockey Player", }) .addTo(controller); http://empowerplay.webflow.io/ I greatly appreciate anyone shedding some light on this for me! Take care!
