Search the Community
Showing results for tags 'scrolltriger'.
Found 210 results
-
Hello, I'm working with scrolltrigger and I'm trying to create a background color from white to blue when the users scrolls. The problem is that I want that transition to be very smooth but the results I have it's that the blue color appears once the trigger starts. This website show an example of what I am trying to do https://demosnappy.webflow.io/product Here is a video as well Screen Recording 2020-12-03 at 9.16.57.mov
-
Hey, This is my first post on the forum, loving gsap! I've ran into a little bit of an error. I have an SVG clip-path that I wan't to perform a simple scale animation on when in the viewport but for some reason it does not want to run in safari, I'm fairly new to gsap so don't have much experience troubleshooting SVG animations, so any help would be appreciated, cheers! NOTE: I've not included the scrollTrigger library on the codepen just so you don't have to scroll to play the animation, the bug still stands.
-
Hello, I want to animate images with same class when each of them enter the viewport. I've 5 images in my codepen each with a class 'z-out'. My JS is let exptl = gsap.timeline({ scrollTrigger:{ trigger: ".z-out", start: "top 85%", end: "top 5%", stagger: 1, scrub: 2, markers: true } }); exptl.from(".z-out", { x: 100, opacity: 0, duration: 1 }); The problem is when the 1st image enters the viewport, the animation happens for all the images. So, When I scroll further animation is already occured. I'm using this for my portfolio, I want to animate the some images with a common class when each enter the viewport. I don't want to create multiple classes and a tweens for each of them. Codepen: https://codepen.io/SahiljeetSingh/pen/qBNedNK -
Hi, I'm fairly new to GS and I'm already loving it. Thanks GS! So, in the demo... Cards change to a dark green color if they are in focus (basically, 80% width) and scroll when triggered. Issue 1: If we resize the window (eg: 50% width), we will notice that the animation works but the scroll positions are all messed up, including the background-color. Any idea on what I might be doing wrong? Is this implementation correct? Issue 2: If I change my (vue) route and come back to this view, I notice the trigger points have moved way down in the doc flow and thus my triggers don't work and the animations also doesn't work. Although, if I resize the window/ refresh the browser - Everything works correctly. (I'm finding a bit difficult to demo this issue here) Kindly help me, I've been searching for a solution for quite some time... Thanks.
-
Hi Everyone, Trying to figure out how I would initiate scroll trigger if my trigger was more then half way down a page. As you will see in my codepen example, the graphic I'm trying to animate which is below the purple container has already ran through the animation timeline without any scrolling interaction. I set up my trigger to start at ".center-container" but that doesn't seem to work any longer. How would I go about finding the exact start value of my trigger or how I get it to start properly at my desired trigger point? What should happen is when a user scrolls to that section/div it will cycle through animations until the end of that container. Thanks!!
-
Hey guys, I have a question regarding this plugin. I have a website that uses horizontal scroll, the main div has children sections and the sections have their content. Now a I have a separate navigation menu on top and what I need to do is to show which section you're in, so I need to track when a section has pass the middle of the screen so I can highlight the navigation menu. It's there a way to do this with this plugin. I don't have a codeped but here is the link to my website https://dev-shapetx.pantheonsite.io/ This is the code that I use to initiate the plugin this.scroll = gsap.to(this.container, { x: () => -( (this.container.scrollWidth - document.documentElement.clientWidth) ) + "px", ease: "none", scrollTrigger: { trigger: this.container, invalidateOnRefresh: true, pin: true, scrub: 0.2, end: () => "+=" + (this.container.scrollWidth - document.documentElement.clientWidth) } });
-
Hi Everyone, Having a small issue with using the pin property in scrolltrigger. I have a multi layer svg inside of a single div. When you scroll down different layers of the svg should appear and other layers should hide. I was able to accomplish this (with the help from this amazing forum) using css (position: fixed) but I'd like to see if this is possible using the pin property instead. As you can see from my pen when I scroll down all the layers appear. The scrolling svg should stop at the top of the second container div. Should I be using pin this way or should I separate the svg layers I have into separate svgs and add each in to separate divs so I can get pin to work? Thanks!
-
Hello, Thought I would post on here in case anyone has any good references on how I could recreate something similar to the section starting with 'Real Estate' on this example website: https://videinfra.com/ I am planning to use ScrollTrigger and pinning the overall section. Then translating the images and text based on different triggers. Just need some examples of how to translate the images in a similar way. If someone has a sample Codepen or other reference they could share I would really appreciate it.
-
I'm trying to figure out how to target the element within a batch process on scrollTrigger. In my simple example, I have a script that is using scrollTrigger to look for all elements with a particular class. When it comes into view, I'm toggling a class to change the color. I want to be able to possibly run other functions on that element as well. For example, I may want to add another class to it. Or, I may want to delay it based on a data attribute. But, I can't seem to figure out how to get each target element. I tried "this", I tried "this.target". I tried $(this). For the sake of this question, let's just say I want to add another class to each element after it comes into view. I would have thought something like this would work, but I must be doing something wrong. ScrollTrigger.batch(".animateOnLoad", { toggleClass: "inView", onEnter: function() { var element = this.target; setTimeout(function () { element.addClass('animationComplete'); }, 2000); }, once: true }); Any tips here would be much appreciated!
-
Hi there, I'm trying to speed rotation animation on scroll with use of ScrollTrigger. It works pretty well except when I do a fast scroll the rotation gets crazy and I don't really know how to limit the speed... Maybe I do it all wrong, I tried to clamp value but any ideas on how to limit that correctly? Thanks for your help ! Alex
