Search the Community

Hi, I am trying to pin ".sun" element on bottom right of the page as fixed from start of the page till it reach the ".landscape" element, when ".sun" enter the ".landscape" element then it should scroll as normal with page. I am trying to achieve it by gsap 3 with scroll trigger plugin easiest and efficient way. on my codepen it doing totally opposite what i am trying to achieve. can anybody help please.

hi, I have a problem on ios devices with scrollTrigger, when I scroll, scroll suddenly skips or jumps, I have no idea why this happens because the code I wrote is only this. There's a video at the bottom that you can see what I mean. Thank you for your attention:) gsap.timeline({ scrollTrigger:{ trigger:'#s0', scrub:true, start:'top top', end: 'bottom -220%', pin: '#s0', } }) // .to('#photo1',{maskImage: 'linear-gradient(rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0) 50%)'}) .to('#photo1', { opacity: 0 }); idk.mov

Hello! I hope you guys are doing good. I have a question about Horizontal scrolling in react. I have attached my code pen to illustrate my issue. I created a ref for the timeline and then an array of refs to attached to the panels to emulate the document.querySelector(".portfolio") variable as seen in this CodePen and since i cannot set overflow-x: hidden to my body, I made a page wrapper that does that. However, the horizontal scrolling does not work but other animated element like the image fading in and the parallax effect of the title works. What am I doing wrong and what can i do? Thank you guys so much for all your help now and in the past! Here is my CodeSandbox

i'm trying to create this demo inside a centered div https://codepen.io/GreenSock/pen/KKpLdWW I basically wrapped it with a wrapper overflow:hidden div and changed scrollTrigger's pinning to the center of the viewport, but then I completely lost the layered pinning effect... also - I only managed to center the div horizontally with margin: 0 auto, how can I center it vertically? flexbox doesn't seem to work. here's a demo - https://codepen.io/HiLuLiT/pen/BazMOdL

Hi, I am new to GSAP and trying to reload GSAP/ScrollTigger on DOM #content element change, which can done by many ways, my case: jQuery("#content").load("/somePageURL #content") then the new content replace current page DOM content, and at this stage my code dont work. On my code pen example https://codepen.io/aboutzahurul/pen/bGeQKvy everything works fine on page load (not sure if its the correct way or not) but as if i change #content by calling jQuery("#content").load("/somePageURL #content"); and i replace current content and add custom jquery trigger jQuery(document).trigger('page.loaded',[link]); so i can reload the main timeline function based on the custom trigger page.Loaded but it never load correctly and GSAP animation breaks, only it work if i reload the page on browser. sorry on my Codepen example i didn't added the ajax function to jQuery("#content").load(); cos i am not very expart on codepen but i hope you guys got the idea. On my newly replaced #content may have more .item element or less or empty so i tried to do some checks before i call GSAP timeline. Current HTML: <div id="content"> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=001" /></div> <h2><span>title1</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=002" /></div> <h2><span>title2</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=003" /></div> <h2><span>title3</span></h2> </div> </div> after jQuery("#content").load("/somePageURL #content"); call newly replaced HTML (#content) may be like this: <div id="content"> <div class="item"> <h2><span>title1</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=002" /></div> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=003" /></div> <h2><span>title3</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=004" /></div> <h2><span>title4</span></h2> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=005" /></div> </div> <div class="item"> <div class="img-box"><img src="https://via.placeholder.com/300x300?text=006" /></div> <h2><span>title6</span></h2> </div> </div> So now, how can i reload the scroll triggered animation correctly without reloading the page? Please help... Thanks.

Hey GSAP Community. UPDATE: I have included the CodeSandbox below in a reply thanks to the great tip from Rodrigo that I can import it So the goal...to have the words PROJECTS and WRITINGS scroll from right side of page to left side of page fairly slowly on the scroll down. I also would like the word/heading to be pinned at the top ideally until the next section (writings) comes into view, then it will scroll up and probably even fade out. And then WRITINGS will scroll across as we're scrolling down and get pinned too for a short time or until the CONTACT div pops up into view or something. Both scrolling words will act the same. The issue. So I got the Projects heading to work as intended more or less, but I tried copying it over to the Writings header, thinking it would be the same, but it just keeps playing up and moving/skipping around and I have noooo idea why. I can't get it to be contained in the 'blue' blogs container. Any and all tips are welcome as well. Respective files and code to look into. ProjectList.js in src -> components -> projects BlogsList in src -> components -> blogs Let me know if people need more info to go on. It Thanks in advance. Simon

Hi GSAP Team, I am new to the Scroll Trigger plugin and I am facing an issue with the same. I am having a website wherein I have triggered all the animations using Scroll Trigger and I have also used the rick callbacks now the issue that I am facing is If you are within a particular section and if you try refreshing the page then the scroll trigger animations are not re-initialising. For Example, if you are inside a section with the class name 'ABC' and then if you refresh the page the animations are not happening also the pinned element goes up somewhere hence the scrollbar is not recalculating the original position. Any solutions would be really appreciable. I am also adding my stack overflow link for your guys to understand the situation https://stackoverflow.com/questions/64240035/gsap-3-scroll-trigger-on-leave-animation-reverse?noredirect=1#comment113659636_64240035 Thanks.

This has probably been asked before, and it's very likely I'm taking the wrong approach, but is it possible to make use of the ScrollTrigger mechanism to make a scrubber for an image sequence? NOTES: - There are additional notes on the pen that can't be seen in the sample here, so please visit CodePen for better understanding... hopefully. THANKS!

hello everyone, sorry for my poor english first. I want my project look like google art exhibition, so I use Vue and GSAP to make this demo it work perfectly on pc, but something wired occured on mobile device (try codepen debug mode on your phone) video of wired occured on mobile the core code in codepen demo is initAnimation() initAnimation(){ const vm = this; const blockId = vm.blockData.blockId; const tl = gsap.timeline({defaults:{ duration: 1}}); const $container = vm.$refs.container; const $img = vm.$refs.image; const posData = []; vm.blockData.itemList.forEach(function(item){ let x = item.x; let y = item.y; posData.push({ x:`${x}%`, y:`${y}%`, scale: item.scale, }); tl.add([ tl.to(`#immersive${blockId}-${item.itemId}`, { opacity: 1, y: "-10%" }), tl.to(`#immersive${blockId}-${item.itemId}`, { opacity: 1, y: "-10%", duration: 5}), tl.to(`#immersive${blockId}-${item.itemId}`, { opacity: 0, y: "10%" }), ]) }) // set text animation ScrollTrigger.create({ animation: tl, trigger: $container, start: "top top", end: `+=${vm.blockData.itemList.length * 1500}`, scrub: true, pin: true, anticipatePin: 1, // markers: true, }) // set image animation // delay to get real container height above setTimeout(function(){ const realHeight = $container.parentNode.offsetHeight - $container.offsetHeight; posData.forEach((pos,index)=>{ if(index === 0) return; const thisFromTo = gsap.fromTo($img,posData[index-1],{...pos,duration: 1}); ScrollTrigger.create({ animation: thisFromTo, trigger: $container.parentNode, toggleActions: 'play none none reverse', // set trigger point (according container height) start: `${(index / posData.length)* realHeight}px`, end: '+=20', anticipatePin: 1, // markers: true }) }) gsap.set($img,posData[0]); },500) } data structure of one block container look like this, here is all data { "blockId": 1044, "itemList": [ { "itemId": 3149, "url": "https://images.unsplash.com/photo-1603486001734-7d92cedd1d33?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ", "description": "lorem lorem lorem", "x": -25, "y": 3, "scale": 1 }, { "itemId": 5568, "url": "https://images.unsplash.com/photo-1603486001734-7d92cedd1d33?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ", "description": "lorem2 lorem2 lorem2", "x": 6, "y": -12, "scale": 1 } ] }, I notice this situation seems only happened while having many scrollTrigger on page (or not) and also occured when window.resize event fired (mobile address bar show/hide while scrolling) Any suggestion to fix this, or better way to achieve this effect ? (google art exhibition) Thanks you for reading here

So, the Codepen demo DOES NOT replicate my issue -- which is sooooo frustrating. The Codepen demo works flawlessly. Hopefully screenshots can help. When you open the page, the start position is totally off. When you resize the browser oh so slightly, the start position is where it should and ScrollTrigger works like magic. It's super weird and I cannot figure out why. I've tried other triggers, endTriggers, etc. Nothing. Other pages look good. The only thing I can think of is I have a lot of show/hide functionality with those "view floor plan" buttons. Perhaps that's messing things up? Not using floats, but flexbox, too. I wish I could share a LIVE working page with the issue. Official code: ScrollTrigger.matchMedia({ '(min-width: 1024px)': function () { var tl = gsap.timeline({ scrollTrigger: { //markers: true, trigger: '#main', start: 'bottom bottom', endTrigger: '.footer', end: 'bottom bottom', scrub: true, toggleActions: 'play none reverse none' } }); tl.to('.js-text-header', { duration: .25, opacity: 1, height: 'auto' }); tl.to('.page-cta .grid-container', { duration: .25, boxShadow: '0 0 0px 0px #fff' }); } }); (sorry if the formatting is off copy and paste ¯\_(ツ)_/¯)

<template lang="pug"> .container(ref='container') .container__wrap .hoge .hoge__item(style='background:red') .hoge__item(style='background:green') .hoge__item(style='background:blue') </template> <script> import Scrollbar from 'smooth-scrollbar' import gsap from "gsap" // eslint-disable-line import { ScrollTrigger } from "gsap/dist/ScrollTrigger.min.js" // eslint-disable-line class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {// eslint-disable-line static pluginName = 'horizontalScroll' transformDelta(delta, fromEvent) { if (!/wheel/.test(fromEvent.type)) { return delta } const { x, y } = delta return { y: 0, x: Math.abs(x) > Math.abs(y) ? x : y, // x: Math.sign(x || y) * Math.sqrt(x*x + y*y), } } } export default { mounted() { gsap.registerPlugin(ScrollTrigger) this.scrollbarOnTrigger() this.animation() }, methods: { scrollbarOnTrigger() { const el = document.body // const el = this.$refs.container // const el = this.$('.container') Scrollbar.use(HorizontalScrollPlugin) const bodyScrollBar = Scrollbar.init(el, { damping: 0.1, alwaysShowTracks: true, continuousScrolling: false, delegateTo: document, syncCallbacks: true, }) ScrollTrigger.scrollerProxy(el, { scrollLeft(value) { if (arguments.length) { bodyScrollBar.scrollLeft = value } return bodyScrollBar.scrollLeft }, getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight, } }, }) bodyScrollBar.addListener(ScrollTrigger.update) }, animation() { gsap.utils.toArray('.hoge__item').forEach((el, i) => { gsap.to(el, { opacity: 0.5, scrollTrigger: { trigger: el, scrub: true, horizontal: true, }, }) }) }, }, } </script> <style lang="sass" scoped> .container &__wrap display: flex .hoge display: flex &__item height: 100vh width: 100vw </style> Say hello ? I'm currently using Nuxt, smooth-scrollbar.js and gsap's scrollTrigger to create a product. The above code is an example of scrolling horizontally when scrolling vertically and the animation moves with ScrollTrigger. However, the above code has a problem: when the value of the variable "el" in the scrollbarOnTrigger function is set to something like this.$refs.container, the scrollTrigger animation doesn't work for some reason. If anyone has the brains to solve this, please answer me. I don't understand English, so I'm relying on DeepL. If there are words I don't understand, please let me know.

Hi guys! I tried to draw an svg path on scroll with these three plugins: ScrollTrigger, DrawSVGPlugin, MotionPathPlugin. I did it but I really can't understand why it is drawing in reverse order. When you scroll down more than 30-35%, you will see a red ball drawing a line, but it should start from the top not from the bottom. I don't know if the problem is with line, css or any other thing. Can someone please help me with this. I really don't know how to fix it. @GreenSock

Hi GSAP fellows, I'm trying to rewrite the animation below, so that it can leverage scrollTrigger. https://codepen.io/eric-chuang/pen/wvWvNGd However, how I code right now can't use the trigger '.title-bg' to select multiple elements. Instead, it plays the animation on 'chars' three times. const tl = gsap.timeline({ scrollTrigger: { trigger: ".title-bg", start: "top center", toggleActions: "play pause replay pause", markers: true, } }), splitText = new SplitText(".title-bg", { type: "chars" }), chars = splitText.chars; gsap.utils.toArray(".title-bg").forEach((title) => { tl.set(title, { backgroundImage: "url(" + title.dataset.background + ")" }) .fromTo( title, { clipPath: "polygon( 0 100%, 100% 100%, 100% 100%, 0 100% )" }, { duration: 1, clipPath: "polygon( 0 0, 100% 0, 100% 100%, 0 100% )" } ) .fromTo( chars, { clipPath: "polygon(0 100%, 0 100%, 0 100%, 0 100%)" }, { duration: 0.5, clipPath: "polygon(0 0, 100% 0, 100% 100%, 0 100%)" } ) }); I looked up the document of ScrollTrigger and found the comment in the Simple Example section: "// start the animation when ".box" enters the viewport (once)." I assume that this implies that the way I define my trigger ( '.title-bg' ) will only retrieve the first '.title-bg' element. I know that it's a better way to use 'gsap.utils.toArray' when looping, but since there will be 2 loops in this situation (one for the main .title-bg element and the other for the splitted texts), how is the better way to achieve the effect?

Hi all, I was wondering if someone might be able to offer some help with a scrollTrigger setup I am looking to put together... I would like to be able to know when one of the image blocks on the left comes inline with the pinned element on the right, so that I could do a visual effect on the lined up block, and then remove it and apply to the next block to lineup with the text. Im not entirely sure how to go about his at the moment, my inital thought was to create a whole other scrolltrigger for each block but I doubt that is the way to do this... any help much appreciated... Thanks

If I want to toggle a class on another object, the class "undefined" is set instead of the one I want. Here the example: https://codepen.io/alsodenn/pen/WNrNNap

Hi all, Thanks for the great work on the ScrollTrigger plugin. Its a joy to use! I was wondering if its possible to have a custom offset for the pin functionality? I am animating a video based on the ScrollTrigger progress. Additionally, I want the video element to be pinned at the top. This works just great using pin: true Now I ran into a small issue: I want to start the animation when the element comes into view, but only have it pinned once it reaches the top of the viewport. Setting the start position to start: "top 50%" makes the animation play when the trigger is entering the viewport, but it also sticks the element to its current position. What I would need is a "pinOffset" or a "pinPosition". A very ugly workaround that kinda works: ScrollTrigger.create({ trigger: parentSection, pin: false, start: () => "top 50%", end: () => "200% bottom", onEnter: (self) => { self.refresh(true); ScrollTrigger.create({ trigger: parentSection, pin: true }); }, onUpdate: ({ progress }) => { playAnimation(progress); } });

Hello! I think I probably set this up wrong, but I've been stuck on it for a few days now. I'm hoping to pin the image once it reaches the top of the view port and then pin and animate the text and bar once they reach the center. I want the timeline to finish animating before the text and bar start moving again, which is where I'm getting stuck. I tried pinning the image in a different scrolltrigger but then I had to wait until the pin was complete before the timeline would play. Any help would be greatly appreciated. Thanks! Nicole

Hello, I'm new to GSAP and very happy with it so far. I have an interesting problem and I can't find any codepens or topics containing useful info. Actually I am not sure if this is even possible. What I'm trying to do: Elements are fading in inside a section, when you scroll to it. When you scroll past it the elements fade out again and when you go back up they fade in again. I'm using stagger to animate the elements inside the section. Is it possible on scroll up to reverse the stagger effect, I would like the elements to fade in from the last one to the first, but only when scrolling up. I know that using a negative value for the stagger does that, but I'm not sure if you can combine it with the toggleActions somehow. All ideas are welcome, thank you :)

so in my codepen i have 3 sections i want to animate the 3rd section in such way that if section 2 fade out at that time section three will fade in and all the transitions will run on scroll but pin will not move. i am new here please help me.

Dear GSAP Pros, I ran into an issue, where a ScrollTrigger should trigger the start of a timeline which was declared before. The Problem: The animation timeline is a bit complex (but simplified in the CodePen example) and should affect multiple elements in multiple sections. I created a loop, so that each of the elements would get triggered at it’s correspondending scroll position. But all instances are still triggered at the same time. I guess the problem is the timeline, which was declared outside of it. On the other hand I can’t get it inside the loop. I would appreciate any help!! Thanks a lot!!!

Hi!. First of all. Sorry for my english. ScrollTrigger works correctly but when I resize the screen the values of the style attribute are lost and the element that I am animating returns to its initial position ScrollTrigger.saveStyles(data) ScrollTrigger.matchMedia({ // Desktop '(min-width: 900px)': function () { let tl = gsap.timeline({ scrollTrigger: { trigger: imageOverlayBorder, start: '10% 20%', end: 'bottom 75%', toggleClass: { targets: [data, imageOverlay], className: "active" }, toggleActions: 'restart none none reverse' } }) gsap.set([imageOverlayBorder, imageOverlay], { autoAlpha: 1 }) gsap.set(dataColumn, { alignItems: 'flex-end' }) tl .fromTo(imageOverlayBorder, { backgroundColor: 'rgba(0, 0, 0, .3)' }, { duration: .5, backgroundColor: 'rgba(0, 0, 0, 0)', ease: 'linear' }, 'overlay') .fromTo(imageOverlayBorder, { boxShadow: '0 0 0 0 inset #fff' }, { duration: .5, boxShadow: '0 0 0 80px inset #fff', ease: 'expo.out' }, 'overlay') .fromTo(imageOverlay, { x: '-100%' }, { x: '-35%', ease: 'expo.out', duration: 1 }, 'overlay') .fromTo(title, { color: '#fff' }, { color: '#ff570d', duration: .25 }, 'overlay') .fromTo(data, { left: '50%' }, { left: 'calc(50% - 100px)', ease: 'expo.out', duration: 1 }, 'overlay') .fromTo(meta, { autoAlpha: 0, y: 25 }, { duration: .5, autoAlpha: 1, y: 0, ease: 'expo.out', }, '-=.25') }, CSS Code: @media screen and (min-width: 900px) { left: 50%; width: 50vw !important; transform: translate(-50%, -50%); .et_pb_column { display: flex !important; flex-direction: column !important; align-items: center; } } I made a little video where this weird effect is reproduced Cheers. VID_20201007_224000.mp4

Hi, i’m trying to achieve this behaviour and im googling without any luck for the past few days. Seems easy in theory so im just wondering if it is possible with gsap / scrolltrigger. -while .div1 is in viewport first mouse scrolldown will scroll to the next anchor point (.div2) basically my first two sections on website im working on are full height and width, i have button there that scrolls to the next section and im trying to bind this scroll tu function to mouse wheel as well so you cant stop scrollimg between tho sections and first scroll takes you straight to the nech anchor point. After that scroll behaves nornally again. im using gsap3 scrolltrigger integrated via proxy with locomotive scroll. does anyone know if this is possible? thnaks a lot for any help:)

Hello, I'm trying to refresh my button animation without having to put it after the main animation (it's my paradigm). As you can see the start marker is situated where the button was before the pin spacer of the main animation was added. Thanks for your help

Hi, I'm having a problem with scrollTrigger. I have two sections that I want to do a horizontal scroll. I've got both individually working great. But when I mix the two in together on the same page. There are issues. Notably on Safari you can see after one horizontal section is done, it's taken over by the next horizontal scroll even though the second horizontal scroll area is not the next section on the page. Can you anyone point me in the right direction to fix this?

Hello, I'm having a issue with ScrollTrigger on a WordPress installation. This is my enqueue script in functions.php function my_gsap_script() { wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/js/gsap.min.js', array(), false, true ); wp_enqueue_script( 'scroll', get_template_directory_uri() . '/js/ScrollTrigger.min.js', array(), false, true ); wp_enqueue_script( 'script_home', get_template_directory_uri() . '/js/my_gsap.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'my_gsap_script' ); Here's the code of my_gsap.js: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until images, links, fonts, stylesheets, and js is loaded window.addEventListener("load", function(e) { // custom GSAP code goes here gsap.registerPlugin(ScrollTrigger); gsap.to(".c", { scrollTrigger: ".c", // start the animation when ".box" enters the viewport (once) x: 500, duration: 3 }); }, false); }); The code works correctly: when the ".c" element appears on the screen, it moves along the x axis. However, if I add the "start" parameter after duration, like so: // wait until DOM is ready document.addEventListener("DOMContentLoaded", function(event) { // wait until images, links, fonts, stylesheets, and js is loaded window.addEventListener("load", function(e) { // custom GSAP code goes here gsap.registerPlugin(ScrollTrigger); gsap.to(".c", { scrollTrigger: ".c", // start the animation when ".box" enters the viewport (once) x: 500, duration: 3, start: "20px 80%" }); }, false); }); The ".c" element still moves as soon as it appears on the screen, and the console says: Invalid property start set to 20px 80% Missing plugin? gsap.registerPlugin(). Please help.