Jump to content

Search the Community

Showing results for tags 'gsap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi, So I basically have a div which has my Lottie Animation which I have hooked with ScrollTrigger using one of the helper functions as mentioned here. Everything is working fine except I want to add a preloader to my website. I deployed the entire code using jQuery and am firing the preloader on window load but the Lottie animation doesn't seem to follow that. My Lottie file loads after everything has loaded and preloader has been hidden due to window load. What should I do ? I'm stuck. Thanks in advance.
  2. I want to replicate this video animation. But I am unable to think of a way to pin and start the text animation simultaneously. I have created something with the help of docs but can't get it same. Can anyone help me with a better way to create this? Thanks for reading.
  3. Have you ever been in a situation with GSAP where you needed a higher level of control over conflicting tweens? If you’re just creating linear, self-playing animations like banner ads, chances are the default overwrite mode of false will work just fine for you. However, in cases where you are creating tweens dynamically based on user interaction or random events you may need finer control over how conflicts are resolved. Overwriting refers to how GSAP handles conflicts between multiple tweens on the same properties of the same targets at the same time. The video below explains GSAP’s overwrite modes and provides visual examples of how they work. Want to master GSAP? Enroll in CreativeCodingClub.com and unlock 5 premium GreenSock courses with over 90 lessons. New lessons like this one are added weekly to keep your learning fresh. GSAP’s 3 Overwrite Modes false (default): No overwriting occurs and multiple tweens can try to animate the same properties of the same target at the same time. One way to think of it is that the tweens remain "fighting each other" until one ends. true: Any existing tweens that are animating the same target (regardless of which properties are being animated) will be killed immediately. "auto": Only the conflicting parts of an existing tween will be killed. If tween1 animates the x and rotation properties of a target and then tween2 starts animating only the x property of the same targets and overwrite: "auto" is set on the second tween, then the rotation part of tween1 will remain but the x part of it will be killed. Setting Overwrite Modes // Set overwrite on a tween gsap.to(".line", { x: 200, overwrite: true }); // Set overwrite globally for all tweens gsap.defaults({ overwrite: true }); // Set overwrite for all tweens in a timeline const tl = gsap.timeline({ defaults: { overwrite: true } }); Below is the demo used in the video. Open it in a new tab to experiment with the different overwrite modes See the Pen overwrite demo by SnorklTV(@snorkltv) on CodePen. Hopefully this article helps you better understand how much control GSAP gives you. Overwrite modes are one of those features that you may not need that often, but when you do, they can save you hours of trouble writing your own solution. For more tips like this and loads of deep-dive videos designed to help you quickly master GSAP, check out CreativeCodingClub.com. You’re going to love it.
  4. Hey, I have a lottie animation which I have hooked with LottieScrollTrigger function as mentioned in the helper functions sections and it's working fine as well but the issue is that it takes too long to load first time on a mobile as compared to when I test it in mobile viewport of chrome dev tools (By disabling cache). If it helps, my animation is approx 94MB in size and I have a blazing fast internet connection. The animation is basically a bodymovin json file of a png sequence. What possibly could be the issue here ?
  5. How to create this mouse hover animation? ref: https://oxymoron.studio/
  6. Hi, I am fairly new to web development, so this may be a silly problem but please help me out: Using GreenSock | Docs | Helper Functions as a reference, I have animated two of my divs, which were animating perfectly on scroll in the page, until I tried to add a navigation bar to the page. For a mobile, it is a hamburger menu which when clicked, opens up the navigation bar on the right side of the page. It works perfectly as long as the viewport has anything but my scrolltrigger hooked divs. The moment one of the scrolltrigger related div comes in the viewport, the navigation stops displaying. Is it possible that there is some kind of conflict between the click EventListener of Navigation & DOMLoaded Eventlistener of the scrolltrigger as mentioned in the GreenSock | Docs | Helper Functions ? What should I do ? YOU WILL SEE THE NAVIGATION BAR ONLY IN SMALL SIZED VIEWPORTS. I have attached a sample codepen link and also 2 images which I hope will help you understand the issue. (Although a button is not visible but it works & is placed on top right of the codepen, please bear) Thanks in advance.
  7. Greetings, I'm new to GSAP, I'm implementing a horizontal scroll, I'm following codepen's lead It works well, however in my application when I inspect element this overflow happens As you can see on the right side there is a black overflow. The problem is caused by this code line in CSS: Width equal to 600% Which without that statement, the scroll does not work. I need to find a way to fix the error and not break my app when it opens on other screen sizes. Thanks.
  8. Hi GSAPians, I'm working on a landing page using GatsbyJs + GSAP. I've multiple sections in which I wanna apply the animations on scroll using scrollTrigger. so, I wanna know the best practice to register the scrollTrigger plugin when It's has to be used in multiple sections. Do I've to register it in each section's component? OR Is there any way to register it on one place and then use it in any section or component I want? Thanks
  9. Hello everyone! I was exploring smooth scrolling and scrolltrigger, found beautiful library called asScroll, tryied to add it to my Nuxt.js project. It kinda works, but scroll trigger is updating it's state only when scrolling is stopped, so the animation with scrub was not so smooth. Here is a minimal demo on codesandbox
  10. Hello green fellas! What I'm trying to accomplish is I think very simple but I'm still stuck on it. This is what I want when an user scroll : -> while the user is scrolling, the div must appear slowly (with opacity) at the center of the screen -> when opacity is at 1, keep it like that and do nothing for some defined px/vh while keep scrolling -> when those px/vh are ended then change the opacity from 1 to 0 while user keep scrolling -> go to next div/section and do the same So the div must appear on the center of the screen and disapear on the center of the screen. (And I need to do the same with the following div's). Here is a codepen of what I tried. Thanks a lot in advance for your help!
  11. i think i have to do something similar like this(Looped "scrolling" section) or this this(the red panel animation) to achieve the background effect. i dont know how to implement though can you guys help? check out this video i am talking about this
  12. It is not working properly. Let me explain here is code https://github.com/mishangoti/scroll-component here is video explanation of the issue https://www.awesomescreenshot.com/video/2250268?key=4b667fca8dbad42e89d408e58a1b2034 1) what ever page route I refresh, animation on that page work very good, but when I navigate to other route from that route it does not work properly, However if I refresh that route it works good but in other route it does not work as desired. I have given video link for more detail explanation. Please help me solve this issue, I can't solve it by my self. 2) when i switch route for few times all pages animation start working, but it did not work when i refresh and switch route at first time it did not work, then i switch routes few time than animation start working. Contact: https://api.whatsapp.com/send?phone=919429011743&text=HI&source=&data=&app_absent= Please contact me if you know the solution.
  13. Hi, There are some issue in canvas when implements 3d horizontal flip. Is there a way to make a horizontal flip animation in canvas - fabricjs? Thanks in advance.
  14. Hi guys, this is my first experience with GSAP. I found this library extremely easy to use. As I am a beginner to the world of animations, I don't understand how can I achieve a certain animation in the files attached. ubuntu screen recodere - Google Search.mp4 I have implemented the icon circles moving down or appearing above, but the main issue is how do they blend into white color? I can't think of anything to achieve this. Thanks in advance.
  15. hi guys, i need your help, it's been a couple days that i'm trying to solve this. i have a box wich contains SVGs that are draggable, that box needs its box-sizing to be "content-box", and the draggable SVGs bounds needs to be inside the box (not touching the borders) that's why i created a bounds-box which take 100% width and height of the parent box, and set the draggable bounds to that bounds-box, it works fine , the only problem is when i zoom in or out, the bounds change after dragging the svg around and u can see that the bounds got -1px on every side. thank you.
  16. Hi! I create some demo with image source. I'm trying to make pinned image sequence on GSAP 3. Reference: https://store.google.com/us/product/nest_doorbell_battery?hl=en-US#gq-overview-chap-intro-3 I've found some example but they are implemented on canvas and they user sprite. I dont need to use sprite. Example №1: https://codepen.io/osublake/pen/KKzgqKr Example №2: https://codepen.io/osublake/pen/2152a28cffe2c2c0cca8a3e47f7b21c6 I need other way. I know that's not GSAP product but I want to implement same thing Like ScrollMagic + gsap image sequence https://scrollmagic.io/examples/expert/image_sequence.htmlhttps://scrollmagic.io/examples/expert/image_sequence.html I cant figute it out, how to make it on gsap 3 only. Additional question: what's difference between canvas method or simply div with img source? Is canvas better for page speed optimization?
  17. I've been struggling with the issue for 3 days, rewriting, refactoring code few times. Please help me if possible, guys. I use ReactJS and GSAP to create different computed animations ( overlays over a video ). What happens is that when I seek to specific percentage completed, for example 0.19 out of 49s timeline total length, it does seek to the first 1s part of the animation timeline cycle, and doesn't show the animation at the stage expected based on the progress percentage. I couldn't upload project to codesandbox as 1) it is nda signed and 2) it says that it has exceeded the 500-module items limit; I'm really sorry for that. Could someone please help me? I can share the source code or give access to my github repository. Thanks in advance everyone! import gsap from 'gsap'; import RightTitleStyles from '../../../../styles/right-title.module.css'; import React from 'react'; interface RightTitleProps { range: Object; name: string; currentTime: number; isPreview: boolean; type: 'smaller' | 'bigger'; isVisible: boolean; style: any; subtitle: string; title: string; } const RightTitle = React.memo( ({ videoRef, setStyle, range, name, currentTime, isPreview, type, isVisible, style, title, subtitle, }: RightTitleProps) => { const titleRef = React.useRef(); const { current: tl } = React.useRef(gsap.timeline({ paused: true })); const [ rangeIntervals, setRangeIntervals ] = React.useState< Array< number > >( range.timeIntervals ); const connectTitleRef = ( el : HTMLElement ) => { if (titleRef.current || !el || !videoRef || isPreview ) { if ( isPreview || !el || rangeIntervals === range.timeIntervals ) { return; } else { tl.killAll(); // just clearing out some tweens for repeated recreation } } tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); titleRef.current = el; console.log( titleRef.current.id, videoRef, ); console.log('configuring...'); tl.fromTo(videoRef, { width: '100%' }, { duration: 1, width: '63%' }).to(videoRef, { duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, width: '63%' }).to(videoRef, { duration: 1, width: '100%' }); console.log( 'video configured', ); tl.fromTo( el, { x: name === 'Right Title' ? 150 : -150 }, { duration: 1, x: 0 }, ) .to(el, { x: 0, duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, }) .to(`#${ el.id }`, { duration: 1, x: name === 'Right Title' ? 150 : -150, }); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1); }; // console.log( style, ); React.useEffect(() => { if (!titleRef.current || isPreview) return; console.log( 'styles applied to titleRef', titleRef.current._gsTransform ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars.x || child.vars.width ) ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars ) ); if (!(range.timeIntervals[0] <= currentTime && currentTime <= range.timeIntervals[1])) { console.log( 'current timing doesn`t fit the intervals' ); setStyle({}); tl.progress(0); return; } setStyle({ marginLeft: name === 'Left Title' ? 'auto' : 'unset', marginRight: name === 'Right Title' ? 'auto' : 'unset', }); tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1) console.log( currentTime, range.timeIntervals, 1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0]), ); }, [range.timeIntervals, currentTime]); const show = isVisible; if ( isPreview ) { return <div style={{ top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> } return ( <div ref={ connectTitleRef } id={`${isPreview ? 'previewMode' : 'notPreviewMode'}3${range.color.slice(1)}`} style={{ visibility : !( currentTime + 1 >= range.timeIntervals[0] && currentTime - 1 <= range.timeIntervals[1] ) ? 'hidden' : 'visible', top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> ); } ); export default RightTitle; Title.tsx animation.tsx
  18. Hello! I'm wondering how to replicate this effect on https://monopo.london/ where the mouseover interacts with the colours. I thought it would be something like this https://tympanus.net/Development/FlowmapDeformation/index.html, but it does not seem like it as in this case, it's a still image. In Monopo London, the mouse was interacting with the colours. Really am dying to find out: 1) What this effect is called. Is it repulsion effect? 2) How do I make this? (e.g., use Pixi.JS or WebGL... or?) 3) Are there any tutorials to watch/learn about this mouseover effect together with the glowy background? Any help would be greatly appreciated!
  19. Hi and hello . Working on a custom code for a online platform but I can not at all figure out > how to implement a simple GIF preloader via my internal scr link? Is it possible to implement some kind of simple code to my existing code. The GIF preloader needs to load and fade in / out when the page transition start and ends? internal SRC link: <img src="/s/galleri-studio-artwork.gif"></img> Kind regards from Denmark. Thanks to @OSUblake for helping out with my other issue.
  20. When transforming 3D using perspective for svgs chrome there is always a bug that I face. For example on this web https://threeedy.surge.sh/ when all the elements are translated in 3D, there is a bug in the where it sticks on awkward positions. And this happens only in chrome , on firefox it stays in 3D transformation. Also in my portfolio web: https://obaidnadeem.surge.sh/ in the User Interface section I have done the same thing but getting the same bug in chrome while the firefox runs everything smoothly. Is their solution to this or am I doing something wrong? or the only solution is to wait until chrome team fixes bug from their end and extend support for Scalar Vector Graphics ?
  21. As i was using the angular 12 to build the webapp i'm trying to use the scroll trigger animation in my project, the thing is the initial animation is working fine. But when it comes to ScrollTrigger in doesn't works in angular. I dont know why... I want to target a particular class in HTML to animate it using the scrolltrigger plugin
  22. I am using gsap scrolltrigger to toggle a class that makes the container sticky. After the end of the animation when the class is removed it behaves weirdly. Here is the video link : https://drive.google.com/file/d/12WOmmK43dFBxvVLKuDPoAGnOAT4-b76L/view?usp=sharing As you can see in the video after the end of animation it moves it..... Is there any fix to this ? Javascript code : const canvas = document.getElementById('hero-lightpass'); const context = canvas.getContext('2d'); const frameCount = 45; const currentFrame = index => `./assets/medium_${(index + 1).toString().padStart(4, '0')}.jpg`; canvas.width = 600; const images = []; const airpods = { frame: 0, }; for (let i = 0; i < frameCount; i++) { const img = new Image(); img.src = currentFrame(i); images.push(img); } console.log(canvas.width); gsap.to(airpods, { frame: frameCount - 1, snap: 'frame', scrollTrigger: { trigger: '.sticky-wrapper', scrub: 0.5, markers: true, start: 'top 48px', end: 'center 49px', toggleClass: 'sticky', }, onUpdate: render, }); images[0].onload = render; const getheight = () => {}; function render() { console.log(images[0].naturalHeight); const h = images[0].naturalHeight; const w = images[0].naturalWidth; const aspect = h / w; console.log(aspect); canvas.height = aspect * canvas.width; context.drawImage(images[airpods.frame], 0, 0, canvas.width, canvas.height); }
  23. Hello every one , i found so trouble in use scroll trigger with react three fiber , so can any one help me ? or i have to learn some thing befor ?? i saw an example but never see what i need to do thank's
  24. Hi there, I'm trying to build a seamless animation where my van image is centered in the middle with its light, and it is following the line. The white dot at the left is from another codepen: https://codepen.io/lisaschumann/pen/KKqMMoe which I used as a starting point. That point follows the path perfectly, but whenever I try to make my van follow the path in the middle it still takes the path position (-33%) Also, when I try to add my own path, it destroys the animation even more. I would like to use this as my own path <path id="line" d="M0,251.32C59.82,242,144.24,236.61,205,247c24,4.11,51.08,16.94,93.28,17.46,51.08.62,85.58-13.89,110.91-21.77,46.78-14.55,71.87-9.48,225,4.42,154.49,14,231.73,21,263.29,20.4,157.16-3.08,161.25-38.87,254.58-20.52,107,21,131.36,73.93,210.74,60.61,63.78-10.7,66.12-50.36,142.89-69.32,65.67-16.23,129.58.42,193.86,8.47,92.31,11.57,189.23,6,280.72-8.29,292.41-45.49,315.9,15,621.94-1.28,293.86-15.63,282.72-46.8,401-24.71,151.74,28.35,230.58,91,380.35,64,56.7-10.22,79.74-21.4,168-37.43,69.39-12.61,149.91-9.39,220.58-9.3,52.95.07,131.22-1.76,227.87-4.31" style="fill:none;stroke:blue;stroke-linecap:round;stroke-width:10px" /> Any help is massivly appriciated!
  25. When I add pin to element background of scroll is visible Here's my code: gsap.registerPlugin(ScrollTrigger); function gsapanim(){ const locoScroll = new LocomotiveScroll({ el: document.querySelector(".scrollContainer"), smooth: true }); // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning) locoScroll.on("scroll", ScrollTrigger.update); // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things ScrollTrigger.scrollerProxy(".scrollContainer", { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; }, // we don't have to define a scrollLeft because we're only scrolling vertically. getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). pinType: document.querySelector(".scrollContainer").style.transform ? "transform" : "fixed" }); // TIMELINE 1 const tl1 = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: '.header', start: "top top", end: "bottom 60%", scrub: 3, markers: false, id: 'header', pin: '.header', } }); tl1.to('.top__logo', { scale: 4, opacity: 1, ease: "none" }) const tlcs = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: '.header', start: "top top", end: "bottom 60%", scrub: 3, markers: false, pin: '.header', } }); tlcs.to('.top__smoke-child', { x: "-200%", opacity: 0, ease: "none", id: "header2" }) tl1.to('.top__logo', {scale: 5, opacity: 0, duration: 0.5}); tl1.to('.header', {opacity: 0, duration: 0.1}); tl1.to('.header', {display:"none", color: "black"}); // TIMELINE 2 const tl2 = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: ".section--main__ui_1", start: "-385px 28%", end: "999px 33%", markers: true, toggleActions: "restart none restart none", id: "tl2" } }); tl2.fromTo('.main__top_1', {opacity: 0}, {opacity: 1, duration: 1, delay: 1}) tl2.fromTo('.main__description_1', {opacity: 0}, {opacity: 1, duration: 1}) const tl3 = gsap.timeline({scrollTrigger: { scroller: ".scrollContainer", trigger: ".section--main__ui_2", start: "-385px 28%", end: "999px 33%", markers: true, toggleActions: "play restart restart none", id: "tl3", } }); tl3.fromTo('.main__top_2', {opacity: 0}, {opacity: 1, duration: 1, delay: 1}) tl3.fromTo('.main__description_2', {opacity: 0}, {opacity: 1, duration: 1}) // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); P.S: My container is also called "scrollContainer"