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. Hello There, I got a problem with my animation when I use the scrollTrigger for the second element. Also , I can't see the markers! any explanation ? Thanks
  2. "What was that method name again?" "Is the 2nd parameter supposed to be a number or a boolean?" Even seasoned GSAP users need reminders with such a rich API. The GSAP cheatsheet is a big help, but auto-completion and code hinting right in your editor can really boost your productivity. Here's how: This is all made possible by TypeScript declaration files which describe the GSAP methods and properties that are available and the data types they expect. We recommend that you use Visual Studio Code (VS Code) or WebStorm as they were the easiest editors to get it working in of the editors that we tried. If you're using modules... It's super simple to get auto-completion and hinting working in a modules environment: Install GSAP (via npm, yarn, whatever). For more information about how to do that, check out the module installation video. Import GSAP into your file(s). For more information about how to do that, see the GSAP Install Helper. That's it! In editors that support TypeScript declarations auto-completion and hinting should work automatically. If you're using plain JS files... Enabling auto-completion and hinting with regular JS files (in editors that support it) takes a few more steps: Make sure you're logged into GreenSock.com. Download the GSAP ZIP file from the GreenSock homepage or your account dashboard. Open up the ZIP file. Open up the "npm-install-this" directory. Open up the .tgz file inside of that directory. Copy the /types directory. Paste the /types directory into your project's root directory. Create an empty jsconfig.json file in your project's root directory. This will cause your editor to look for TypeScript declaration files. Sometimes it's necessary to restart your editor before it starts working. That's it! In editors that support TypeScript declarations auto-completion and hinting should work at this point. Some editors may require that you add support for TypeScript through third party packages. For example there's a TypeScript package for Sublime and one for Atom. You may need to install an additional package like these to get auto-completion and hinting working with GSAP in your editor. That's why we recommend Visual Studio Code (VS Code) or WebStorm. Before GSAP 3, GSAP didn’t have official Typescript declaration files so people commonly used ones from DefinitelyTyped also known as @types. Now that GSAP 3 does have official Typescript declaration files, you should NOT use the @types declarations. They are old and will not work with GSAP 3. If you find errors in the Typescript declaration files, find that some method is missing, or doesn’t have a good description, please let us know! You can create a post in the GreenSock forums or you can create an issue on GitHub. As always, if you have questions feel free to post in our forums.
  3. I'm animating some text on a path back and forth, quite a simple animation but occasionally the type keeps jumping and glitching. If you watch the demo on codepen you'll see some letters, quite randomly and sporadically jump or flip over. You might have to watch it a few times as some times it happens more than others – I can't seem to figure out why it's happening or find a fix, any ideas or help on this would be massively appreciated!
  4. Hello, the structure i want to make is actually auto height at the top and layers from the bottom, and then the last part is independent of the layer. For this I am sharing the image
  5. Hello, what can I do to play the animation in the codepen link in reverse?
  6. Gsap Rotating Arrow in circle,and is stopping well at various points, But Now want to trgieer some js code on each that stopping points, So that i can glow or animate each points logo , when stop on it for some time Just want to show Different alert or consoles on Different points
  7. Hello, there is a reference scroll animation in the codepen link. Here, I want both the image and the caption text to appear as zoom in & out, how can I do that? Fade in & out right now I don't want that. Can you help me?
  8. Helo, i want to disable smooth scroll in mobile browser, because scroll usability is seriously reduced, locomotiv scroll can do this by default. but it doesn't suit me because I use gsap library. I wonder if a scroll without animation is possible for mobile browsers?
  9. Hi, in the codepen example i shared i actually want to do the following. When the image is zoomed, the image goes to the next image and in the same way, it gets visual zoom and its text comes in. Can you help me with this?
  10. 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.
  11. I'm trying to add a little parallax effect to the articles I add into my project from contentful. Even after using `this.nextTick`, it seems like the articles are loading in after the timeline initializes. Can someone help me with getting the dynamic elements to load before the timeline? I don't want to move my gsap to the updated() lifecycle hook, since that seems unnecessarily heavy.
  12. Hey all! So, I've given up trying to shoehorn GSAP into Adobe Animate. Big step! But now I am having issues with getting easelJS to play nice. See the attached CodePen. I am not sure what or who is fighting with whom or if I am just missing something. I am just getting back into GSAP/HTML/CSS after some time away so I am pretty sure that I am missing something. The codePen is me testing out if I can tint my image (what I really want is to mess with the brightness and exposure.) and doesn't work. I've tried uploading to codePen, running locally, firing up XAMMP and running a webserver locally and bupkis. the animation makes it past the easel but won't affect the tint. If any one has a moment please show me the error of my ways. I am pretty sure I am missing something that may be second nature to y'all. Please and thank you, Dez
  13. Hi, I want to animate this three section (red, green & blue), when first(red) section come on top of the browser i want to animate this red section to top, to reveal second section (green). And so one... I almost solved it, but I wish there was no white space between the sections, when scroll. Animation like this: https://teamway.io/ Tnx
  14. It is necessary that when clicked, the animation of the menu would work out and when clicked again, the menu would simply close, without reverse. But when you open the menu again, so that the animation is played again. I will be very grateful for your help) It is necessary that after opening the menu, the menuItemsAnimation animation is triggered.And after the menu was closed, it simply left with it, without reverse, so that the user would not wait until it worked.That is, so that it simply works every time it is opened
  15. Hello, I wanted to do a development for my own project, but i ran into a problem. i am using Luxy Smooth Scroll in my project. I wanted to change the image by scrolling with the gsap pin, but Luxy Scroll is causing a problem and I couldn't solve it, can you help? This is my reference codes https://codepen.io/Danish_Khurshid/pen/jOByPGq
  16. Hey there, i'am trying to do something like this Scrolling Image Sequence, but i want to add some pauses in between. For Content like Text and Images to slide in and while i am scrolling. The Image Sequence should stop for that period of time while the Content Changes. If every Content was displayed the Image Sequence should move on towards the next Frame where another Pause should happen so on and so forth.
  17. Hi GSAP champs, I've been working on an animation in which I draw three SVGs located in one section. I'm drawing the svgs with scroll-trigger in same timeline and also pinning that section with pinSpacing: true and the once: true is working fine as expected that it kills the timeline on completion. but the issue is the space that is being added by pinSpacing: true is not removing it self when animation reaches the end. Please help to achieve this. codePen demo is attached already. Thanks in Advance
  18. http://clients.super-agency.com/test/index.html Hello, I made a menu with gsap, but after clicking on a different link from this menu and going back, the menu remains open, I couldn't find a solution, can you help? Where am I doing wrong? Menu code const ham = document.querySelector(".ham"); const menu = document.querySelector('.main-menu'); const links = menu.querySelectorAll('li a'); const menulist = document.querySelectorAll('.menu-list'); var tl = gsap.timeline({ paused: true }); tl.to(menu, { duration: 1, opacity: 1, height: '100vh', ease: 'expo.inOut', width: "100%", }) tl.from(menulist, { duration: .5, opacity: 0, height: '100vh', left: '0', ease: 'expo.inOut', }, "-=0.5"); tl.from(links, { opacity: 0, duration: 1.2, ease: "power4.out", y: 320, stagger: 0.1, }, "-=0.1"); tl.reverse(); ham.addEventListener('click', () => { menuBar.reversed(!menuBar.reversed()); tl.reversed(!tl.reversed()); }); var menuBar = gsap.timeline(); menuBar.to('.bar-1', 0.5, { attr: { d: "M8,2 L2,8" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.to('.bar-2', 0.5, { autoAlpha: 0 }, 'start') menuBar.to('.bar-3', 0.5, { attr: { d: "M8,8 L2,2" }, x: 1, ease: Power2.easeInOut }, 'start') menuBar.reverse(); Menu Codepen Code https://codepen.io/r3khchand/pen/MWbJOwz
  19. Hi, on Codepen demo, I made "text2" fade in after 1sec on page load. It's OK. But it's also waits 1sec when I scroll to element. I want to make elements fade in immediately when user scroll to element, but wait 1sec on page load. Is it possible? thanks
  20. I have been trying to create a navbar animation where the navbar comes from top when clicked and goes back the exact same way but so far that is not how my code is behaving. On clicking the back button the navbar simply disappears. Here is the codesandbox link https://codesandbox.io/s/misty-star-ncl3z
  21. I used multiple timeline .When i scroll slowly everything works but scroll quickly animation jump and doesn't work . Anyone if you can help this,plz help me.
  22. 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.
  23. 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.
  24. 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.
  25. 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 ?