Search the Community

Many years ago, I created a website where each 'page' was on a virtual grid of viewports e.g. ************************************************** * home page * contactus * about * ***************************************************** * section1.p1 * section1.p2 * section1.p3 * *********************************************************************** * section2.p1 * section2.p2 * section2.p3 * sectopn2.p4 * *********************************************************************** * section3.p1 * section3.p2 * ****************************************************** * section4.p1 * section4.p2 * section4.p3 * ****************************************************** Imagine the sections above are viewports and there are anchors connecting them, so an anchor in section1.p1 might link to section3.p2 and an ancor in section4.p2 might link to section2.p4 Using Mootools, the FX.Scroll function would take the x and y coordinates and when clicking the link would smoothly scroll to and from the different anchor points, sometimes diagonally or horizontally/vertically depending on the target location. Is there any way in GSAP to achieve this? Another solution that would meet my needs would be a vertical the horizontal scroll in one move if diagonal scrolling cannot be achieved. I'm quite new to GSAP, but understand JavaScript and jQuery. Many thanks Pete

Hi, i have made some animation with gsap, i used gsap.from for made the animation, but when i refresh with (CTRL+R) for F5 the animation on my bottom page don't play... i upload video for you can see what i talk .. my code : https://codepen.io/arkunis/pen/zYXKKLx video for you can see Thx for your help !

Hi, and Thanks in Advance; I need to create two sections. The parent div will be pinned, and you can scroll a Lottie animation on the left and text on the right together and snap the Lottie animation to specific keyframes. For example, I have a Lottie animation where it shows a bulb, then transforms into a notebook and then into a tablet. Simultaneously, on the right side section, I have a div with text in it. so when the animation is at bulb I want to show text bulb {initaily},then I scroll and if the animation is at the notebook I want to show notebook in the div text area. And if the animation is in between, snap to the nearest keyframe of a bulb or notebook and so on. and when the Lottie animation ends then unpin parent section. You can see the example if the website: https://www.brandnewschool.com/ if you scroll down. I am really stuck here.

Hi, I would like to transform my first SVG to second SVG while scroll or On-load. The problem is, my svg doesn't contain the path directly and it has some shadow effect too. I tried to follow the official video instruction and it doesn't seems to work. Is there any way to achieve this with morphSVG or I need another plugin? I'm a beginner here so, any help would be much appropriated. Many Thanks Sajidul

Hello everyone! I express my deep gratitude to the community. There is a problem when objects disappear and appear while scrolling (banner-big children). How can I fix this?

Sorry for not providing any code pen. I'm new to GSAP. I'm trying to do an animation like this website with yellow element scaling. But I don't know how to implement it. I've checked the documentation but the ScrollingTrigger property in not for free usage. SO how to achieve this animation otherwise. Any help on this would be appreciated.

I am looking to develop a layout on GSAP in which I require horizontal scroll for few sections. I have attached layout structure diagram.

Hi devs, I'm trying to achive this animation using GSAP: As you can see the text is already present but the animation take place with opacity while scrolling. Thanks all!

I am trying to use the scrollTrigger plugin while implementing the fix for the safari scroll issue you flag in this article here. When I apply the CSS from this it breaks the pages native scroll and therefore the scrolltrigger doesn't fire. What can I do to resolve this In the section: Stop iOS Safari from resizing the window on scroll body, html { height: 100vh; width: 100vw; overscroll-behavior: none; overflow: hidden !important; } #viewport { position: fixed; overflow-x: hidden; overflow-y: scroll; height: 100vh; width: 100vw; -webkit-overscroll-behavior: none; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } https://greensock.com/docs/v3/HelperFunctions#scrollResize My simple scrollTrigger on the element is just this but it breaks cause the above CSS ScrollTrigger.create({ trigger: '#test', start: 'top top', // endTrigger: '#otherID', end: 'bottom 50%+=100px', onToggle: (self) => console.log('toggled, isActive:', self.isActive), onUpdate: (self) => { console.log( 'progress:', self.progress.toFixed(3), 'direction:', self.direction, 'velocity', self.getVelocity() ); } });

const assetLoader = new GLTFLoader(); var mixer; var model; assetLoader.load("https://cdn.glitch.global/5213cd0b-d594-4b34-9064-2f1f38b42c78/cube33.glb?v=1665271977633", function(gltf) { gltf.scene.traverse(function (node) { if (node instanceof THREE.Mesh) { object.frustumCulled = false; node.castShadow = true; node.material.side = THREE.DoubleSide; } }); model = gltf.scene; model.scale.set(1,1,1) model.position.setY(-1); model.position.setX(2); model.position.setZ(-2); model.rotation.x = Math.PI / 2; model.rotation.y = Math.PI / 2; model.rotation.z = Math.PI / -2; scene.add(model); camera.position.z = 4; /// MIXER&ACTION CONFIG/// mixer = new THREE.AnimationMixer(model); var action = mixer.clipAction(gltf.animations[1]); action.play(); var actiona = mixer.clipAction(gltf.animations[1]); action.play(); createAnimation(mixer, action, gltf.animations[1]); } ); var clock = new THREE.Clock(); function render() { requestAnimationFrame(render); var delta = clock.getDelta(); if (mixer != null) mixer.update(delta); renderer.render(scene, camera); } render(); function createAnimation(mixer, action, clip) { let proxy = { get time() { return mixer.time; }, set time(value) { action.paused = false; mixer.setTime(value); action.paused = true; } }; /// GSAP CONFIG/// function GSAP(){ gsap.registerPlugin(ScrollTrigger) ScrollTrigger.defaults({ scrub: 3, }) gsap.set(model.position, {x:-0.70,y:-1.80 ,},) gsap.to(model.position, { scrollTrigger: { trigger: ".section-four", start: "top top", toggleActions: "restart play none reset", //onLeave: myLeaveFunc, //onLeaveBack: myLeaveFunc end: '+=2000px', }, x:-1, y:-3 , }); let scrollingTL = gsap.timeline({ scrollTrigger: { trigger: ".section-four", ease: "Power4", end: '+=5000px', pin: true, scrub: 2, onUpdate: function () { camera.updateProjectionMatrix(); } } }); scrollingTL.to(proxy, { time: clip.duration, repeat: 0, }) /// I NEED TO RUN ANIMATION [1] HERE /// let scrollingTL1 = gsap.timeline({ scrollTrigger: { trigger: ".section-five", ease: "Power4", end: '+=5000px', pin: true, scrub: 2, onUpdate: function () { camera.updateProjectionMatrix(); } } }); scrollingTL1.to(proxy, { time: clip.duration, repeat: 0, }) } GSAP() }

hello i am jignasha please someone tell me how gsap3 scrolltrriger work with angular framework , i want one ball is moveing on scroll event in website

Hi, it's me again, I've achieved what I wanted both on desktop and mobile but on the latter I have this new problem of the addresbar messing things up. Let me explain, on mobile I have positioned this "isthmo" logo right above the bottom of the page, if I swipe up it goes on top, if I swipe down it goes back to the starting point. The address bar keeps getting in the way, I don't think u can see the problem on the codepen due to its structure so I'll attach some screenshots from the real website. I tried: ScrollTrigger.normalizeScroll(true); but it wasn't working well, plus disabled the page refreshing swiping down Should I try: ScrollTrigger.config({ ignoreMobileResize: true}) Thanks for your patience

I'm creating a background effect from blur to clear when scrolling. starts with filter: blur(30px) when image enter viewport. and then more clear with filter: blur(0) after top of image reach top viewport using gsap fromTo and add utils for css filter. but i have no idea for now. can help please?

Requirement We are looking for a front-end developer with knowledge on animations (GSAP, three, locomotive, etc.) together with good references and high proficiency on performance. Translating pixel perfect prototypes into high quality code Visual and engineering mindset Great attention about details on design Project Responsive one page website The page has five main sections that are intro, about, works, clients, contact with some transitions between these sections. Scroll trigger functions Thanks for your time, send me a DM with some interesting and visually complex samples that you have done.

I have a scrub animation, navigated by a Tags (scroll down arrow). When I navigate with the scroll down arrow, the scrolling switches to the rubber band scrolling. This weirdly only happens on mobile safari and isn’t reproducible on codepen… Here’s a link to the page: Sample Page Thank you for any hints or comments! IMG_1229.MOV

Hey I have created a small example of what I wanna do. As you can see in my codepan video items are popping in correctly but after all three videos popped in I want to animate them on a path so it look like they are scrolling endlessly and I want to make it repeating. Please help me I'm new to gsap.

Hi, I've been playing about with this codepen pen example I'm trying to make a continuous loop animation with vertical scrolling rather than horizontal however i'm running into a few issues. The list doesn't seem to start at the first index and when i scroll it's not going in sequential order but it's just jumping about (i.e i want 1 > 2 > 3 but it's doing 1 < 12 > 2 < 13 > 3) Any ideas? Is it because the content is dynamic and the plugin has issues recalculating? I'm using: GSAP v3.6.0 Angular 11 Demo: https://stackblitz.com/edit/gsap-continuous-scroll

Hello, I'm new to GSAP platform and I need to create simple scrolling animation for some bullet list. Here is an example on this page. https://www.marqeta.com/ It is build on custom javascript in this website but i want to make it on GSAP if possible kindly guide me. Kindly look at this section I want to achieve the same right side text scrolling animation kindly help me out in this. Thanks.

Hi! I've come across this especially unique combination of effects, and have been left in both awe and pain trying to figure out how to replicate such a complex stringes of elements. I've already done some research to figure out the basics of its mechanics, but as someone new to coding, my understanding is limited still. The site and effects in question are: Home Page - https://panamaera.fr/ 404 Page - https://panamaera.fr/404 About Page - https://panamaera.fr/about There seem to be two effects at play. A Canvas over images/videos, that generates a smokey distortion effect, rendering the smoke depending on what visual is underneath the canvas. The Canvas remains active between pages, registering a page change just like a visual change in a video, creating the fading smoke distortion transition between pages and their visual material. A mouse hover effect with smoke & distortion. The smoke is moving in synch with the Canvas' smoke, while the pointer clears the Canvas from over the image and lightens it a bit. On here https://www.awwwards.com/sites/panamaera, the site is tagged as having WebGL, GSAP Animation, ReactJS, GLSL used on it, however I'm not looking to learn everything about these tools, only whats specifically needed to recreate these effects. As I am looking to learn to recreate this effect, my questions are: What coding methods and techniques are they based on (within the world of the above mentioned tools)? What are the exact & relevant coding topics I should look for education on? How would you go about recreating these effects?

Hello everyone! I've been racking my brain trying to think of The Right Way™ to do this. In the codepen demo I've been working on, I've worked out how to have an inital timeline, which then moves to the main timeline. The total duration of the timeline is linked to the total pageHeight, and progress is tied to the scroll event. The main timeline currently repeats infinitely as this needs to continue to animate for an unspecificed amount of time (This could vary depending on the page's total scrollHeight). Ideally I would like to have another timeline play at the very end of the duration which resets the 'FOUNDER' text back to the initially displayed state just before the end of the total duration, but I'm pretty stumped on how I should approach this with GSAP given I don't have a fixed distance to scroll. Does anyone have any ideas or methods? Is there a better method I should be using rather than repeat -1 in this instance? Thank you for any help or suggestions in the right direction! Andrew

Hi GSAPers, I have an interesting challenge. I would like to scroll a div using GSAP. I want to scroll the div vertically using a tween that I can control using the position on an audio track head. I thought I could use the ScrollTo plugin, but I can't seem to understand see how to do it since both the time and the y position are fixed before the plugin initiates. Is it possible to change the div scroll position with ScrollTo interactively?

Hi, I have a draggable horizontal carousel, but on mobile it prevents the vertical scroll of the webpage. How do I stop it from only allowing horizontal scroll across the slider? When a user drags their screen to move down the page if they have the slider section on their screen it won't allow them to get further down the website? - This seems like a silly issue so I am aware I am probably missing something simple, any help is appreciated. Thanks Kieran

Hello, I have a problem with my first ScrollMagic Animation. I would like to fade in the boxes on scrolling down. This works fine except for the first time. When I scroll down for the first time the values like opacity don't "tween", they switch directly from 0 to 1. After that I can scroll up- and down with a working animation. It's like some kind of setting is missing. Do you have an idea what exactly is missing? This is my codepen: Thanks, Becca

Hi All, Hoping someone can help with this issue I'm facing. I am controlling the TimelineMax progress based on scroll position. Pretty simple, however I noticed that my tweens are running for the entire length of the page. This is because I am currently calculating the percentage with age-old `window.scrollY / (document.body.clientHeight - window.innerHeight)` What I need help with, is figuring out how to start & finish the animation when the `.tweener` div in my Codepen example enters the viewport, to when it reaches the bottom of the viewport. I also don't want to use the behemoth that is ScrollMagic Any help would be greatly appreciated! Cheers

Hi all, I'm attempting to create a vertical draggable with for a "fashionable" effect, an everything works as expected on Android, but not on iOS. On Android, the page doesn't scroll when I swipe up on the draggable, and scrolls only when I tap outside of it. On iOS, bot IPhone and iPad, looks like the page has a priority on the draggable (or the swipe event "bubbles" from the draggable), thus the draggable stays almost in the same position, and the page scrolls. In this pen, the gray draggable scrolls into the black box, and overflows it for a maximum of half of the draggable height. How can I get the same behavior on the platforms? Thanks in advance! (It's better to test the pen in full page mode: https://codepen.io/massic80/full/qYbpOL)