Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'gsap3'.

  • 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 am currently making a basic animation pack that contains effects such as fadeIn, fadeOut, slideIn usinggsap.registereffect(). But as I am making progress I hit a roadblock! I can't seem to get the types right for gsap.registerEffect() to work with Typescript. I'll drop a screenshot below of what is my issue. Any help is greatly appreciated! Edit: gsap.effects.fadeIn() works but it's again flawed, as the intellisense of typescript isn't there as the type is set to any.
  2. Hello, I want to clearProps when iI scrollBack and when my reverse function animation is over to make my links not loosing their hover property. That's because my nav has two different opacity level: The active link is by default on 1, and the other links are by default on 0.3 and when I hover them they go on 0.5 for example. But after making the animation with gsap to hide them, on reverse the get inline styles from gsap that make my default hover not working anymore. Sorry but I'm new with gsap and I couldn't set a valid codepen using gsap3. In my app it works but not on th
  3. Hi! When I remove the markers property or set it to false, the ScrollTrigger stops working. Why? PS: With markers it works let tl2 = gsap.timeline(); tl2.from(".root--offer__header", { xPercent: 650, }); ScrollTrigger.create({ animation: tl2, trigger: ".root--offer__header", start: "top top", end: "+=4000", scrub: true, pin: true, anticipatePin: 1, duration: 2, ease: "none", markers: true, });
  4. Hello everyone :) I have been way to busy over the last year to really put much effort into my ongoing website project due to my work. I hopped on since I started my holiday vacation, got the latest Club Greensock files (GSAP 3) and I have to thank you for gsap.effects and the smooth nature of how they can be injected into Timeline structures!!! I had started animation grid of material and 3D model fades, scale and transition animations along with some basic photoShop graphic elements that fade, flicker and transition with the models and their materials a little over a
  5. Greetings, I'll go straight to the point. Here's the expected behavior: - I would like the whole section (hero) to smoothly start scrolling out and lose opacity once end of the side panel is reached (last of the 'hello' blocks). Here's what currently happens: - The hero doesn't take enough space (I think?), and the section following it goes above it once a scroll point is reached. The hero doesn't fade out (I realize I haven't done anything for that part, but I'm not sure how to implement it so that it starts fading out once the end of the side pan
  6. Hello everyone. I learning amazing library for animation GSAP. I have example by parallax effect on scrolling. https://salute.sber.ru/smartmarket/dev/?_ga=2.31003199.1291033660.1606628165-1328913721.1606628165 In this example, content changes when we are scrolling. I created a starter template, but I can't figure out how to do this effect. https://codepen.io/dc65k/pen/PoGGMRB Help me please.
  7. The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See why GSAP is used by roughly 10,000,000 sites and many major brands. Hang in there through the learning curve and you'll discover how fun animating with code can be. We promise it's worth your time. Quick links What is GSAP? Loading GSAP Tweening Basics CSSPlugin 2D and 3D transforms Easing Stag
  8. 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.
  9. 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(
  10. So I'm implementing a smooth scroll like this: useEffect(() => { const container = document.querySelector(".scroll-container"); document.body.style.height = container.scrollHeight + "px"; const onScroll = () => { gsap.timeline() .to(".scroll-container", { y: -pageYOffset, overwrite: "auto" }, 0) } document.addEventListener("scroll", onScroll) }, []) The smooth scroll is working fine, but its height is not being calculated properly. In other words, the scrollHeight I get from the co
  11. 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 some
  12. 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 reca
  13. Hi there guys, I am very confused. I have a design with lots of lines(roads) which are connected to sections through out the page like on the image on this image given below. Am i able to add those like exactly on the picture with help of gsap and animate the truck on them while scrolling ?
  14. Hi everybody! I have a problem configuring a menu animations. That's my 5th version. I realised the best way is to use master timeline. But, trying to put it all together, I get an unpredictable behavior. Animation for showing/hiding dimmer works great. dimmer_tl .fromTo(dimmer, {opacity: 0, display: 'block'}, {opacity: 1}) .set(js_dimmer, {display: 'block'}) .add('show') .to(dimmer, {opacity: 0, display: 'none'}) .set(js_dimmer, {display: 'none'}) .add('hide') dimmer_tl.tweenTo('show'); dimmer_tl.tweenTo('hide'); But truing to do the same
  15. Hi, i am just getting to know gsap and i have a little problem :/. I am writting a page in gatsby and made a mobile side menu with gsap but i noticed that when the menu is opened for the first time and closed, after resizing the window, the menu doesn't change its position on the x-axis and starts sticking out. const Header = () => { const [isOpen, setIsOpen] = useState(false) const menuRef = useRef(null) const menuBtn = useRef(null) const tl = useRef() const toggleOpen = () => { setIsOpen(!isOpen) } useEffect(() => { const nav = menuRef.current
  16. Hi guys, I am new to GSAP animations, I love everything about this framework. It has made so many lengthy tasks very simple, short and fast too. But unfortunately I am stuck at one point. If you go to my codepen demo, when you click on 'button', you will see a stagger animation which is working fine. I have 6 boxes there and the 5th and 6th number boxes overlaps the 1st and 2nd. I want this animation to work like this only but instead of overlapping I want 1st and 2nd box to fade out before 5th and 6th box fade in.
  17. Hello again, I've been using GSAP3' ScrollTrigger plugin for a little while now and managed to make the skew on scroll effect work, which I really enjoyed using. Although it does work perfectly with normal scrolling, I can't seem to make it work while using the SmoothScrollbar.js plugin (https://idiotwu.github.io/smooth-scrollbar/). Please note to the Pen provided: when the SmoothScrollbar is removed, the skew on scroll effect works. I know GSAP and SmoothScrollbar are separate plugins so I'd understand if it just wouldn't work but I hope someone can find a
  18. Hello, The delay property doesn't seem to work for me while using ScrollTrigger; it does work on loaded animations. Is it supposed to be disabled on scroll? If so, is there another way to delay scroll triggered animations? Really loving GSAP3 so far. Thank you, Julius
  19. Hello, First of all, sorry for just copying and pasting the whole project, but I didn't have enough time to replicate the issue in a minimalistic way. Hope it's useful to solve the problem I'm facing. I'm currently working on my personal site which its homepage consists of a slider. When the slide changes, a div covering the whole viewport with a background image should also change accordingly. It is done using gsap.timeline() and as you can notice, there's a really noticeable amount of lag when the animation happens. Without the background change, everything is smooth.
  20. Hey guys So i am making a project with gsap3 kind of like the apple airpod website I have like 500 + images and on scroll these images are being rendered in the canvas. I want to animate some text which will depend on the frame count the sequence is - frame ==0 animate in some text frame>0 animate out the previous text frame>10 again animate in some text frame>200 animate out the previous text so it goes... can some one tell me how can i do this in a efficient way. Thanks
  21. Hi, I'm very new to gsap and been trying to do this layout today but without any luck. In the pen you can see 4 items to the left, what I'm trying to achieve is to pin this items in the left and change the content in the right with the relevant one. the pen js is very small is where I started and i have been trying different things but I don't know if im going in the right direction I highlighted one of the items as an example of the result I'm looking for, when you scroll past certain offset the element goes to active and the content that shows is the relev
  22. Hello all. I know using calc in JS is not recommended. But as long as it is not in the not supported category, I'd call these bugs. Click the toggle button twice and now the h1 has top: 4.75px instead of calc(1vh). I don't know if GSAP is trying to optimize something, but even if it is it should set 1vh, not 4.75px. https://codepen.io/taylankasap/pen/ZEWMLbB It's jumping to some huge values. https://codepen.io/taylankasap/pen/YzqONVR It is changing values (see devtools) even when from and to are same. https://codepen.io/taylankasap/pen/MWyqJdO
  23. Hi! I try to change animation with (window.matchMedia()).matches How can i get tween from timeline and replace (or edit) it? I read about .remove() method, but how can i add on removed place other tween and how can i add label to tween. for example: tl .addLabel('start') .to('.box-1', {x:100}, "start") // <--- how to change this or how to .remove() this and place other tween on this place .to('.box-2', {x:100}, "start")
  24. Hi, I'm looking for help regarding scroll trigger and items positioned fixed within a pinned section. I'm having an issue where I have a modal that needs to stay in window view once it's open, but it looks like it's being positioned relative to its pinned parent and I'm able to continue scrolling as normal. Hoping someone would be able to help me out!
  25. Are you guilty of any of the most common mistakes people make in their ScrollTrigger code? Creating to() logic issues Nesting ScrollTriggers inside multiple timeline tweens Using one ScrollTrigger or animation for multiple "sections" Forgetting to use function-based start/end values for things that are dependent on viewport sizing Start animation mid-viewport, but reset it offscreen Creating ScrollTriggers out of order Loading content dynamically but not refreshing Why does my "scrub" animation jump on initial load? Or my non-scrub animation sta