Jump to content

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

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, I'm using SplitText to add animation to lines of text based on the following example: gsap.from(split.lines, {duration: 1, x: 200, autoAlpha: 0, ease: "power3", stagger: 0.05}); The animation is working as expected. However, as the text is split into separate tags it means that it's not responsive and leaves whitespace (which is shown in the gsap example). Is there any way around this? Any help would be appreciated. Thanks
  2. I aam trying to achieve https://www.brewsandgrooves.com this kind of smoothness with cross browsing really need for my portfolio
  3. Hi there, I'm trying to speed rotation animation on scroll with use of ScrollTrigger. It works pretty well except when I do a fast scroll the rotation gets crazy and I don't really know how to limit the speed... Maybe I do it all wrong, I tried to clamp value but any ideas on how to limit that correctly? Thanks for your help ! Alex
  4. Like all new members to the forum, I've found an effect that I'm hoping can be achieved with GSAP. https://www.craftedbygc.com/ A sort of abstract-like liquid flow. I'd love to mask it behind an SVG logo. https://peeke.nl/simulating-blobs-of-fluid But like all first posts in this forum - I have absolutely 0 idea where to start. Any pointers would be amazing! Thank you community ❤️
  5. oOLucOo

    JPG Sequence GSAP

    Hello everyone, I used a code that I found here: https://greensock.com/forums/topic/20404-flickering-png-sequence/ Thanks to @OSUblake. My problem: I have a jpg sequence animation (240 frames) and I would like to navigate between the different frames. Go from 0 to 100 or from 150 to 20. I can go forwards but not backwards. On the first click the animation works but when I click again nothing happens Here is my code: HTML <button class="btn btn1">BOUTON1</button> <button class="btn btn2">BOUTON2</button> <button class="btn btn3">BOUTON3</button>
  6. I have a circle which is supposed to be transformed in the direction of the cursor all time. node.addEventListener("mousemove", e => { const {x, y, width, height} = blob.current.getBoundingClientRect(); gsap.timeline() .to(blob.current, { duration: 10, x: e.clientX - (x + width / 2), y: e.clientY - (y + height / 2), force3D: true, overwrite: "auto", ease: Linear.easeNone }, 0) }) This is fine, but includes unwanted behavior: when being further away from the circle and rapidly
  7. 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?
  8. Hi - I'm not sure why but I can't get a simple color tween working, and I can't seem to find anything in the documentation that explains it. I've created a codepen here with what I feel should be the proper implementation. https://codepen.io/heaversm/pen/poyXmXg
  9. So I have a simple GSAP timeline to move an element with the direction of the mouse' event: node.addEventListener("mousemove", e => { const x = e.clientX / 10; const y = e.clientY / 10; gsap.timeline() .to(blurRef.current, { yPercent: -30, x, y, duration: 1 }, 0) }) It works fine, but I want to add an infinite bounce effect which happens simultaneous to the mouse animation. I've done the bounce effect only before with pure css, but this makes GSAP stop working (mouse effect won't
  10. Hi, how can i create anchor links for a horizontal scrolling? My version is not working correctly: $(".menu-item").on("click", function (event) { event.preventDefault(); var id = $(this).attr('href'); var left = $(id).offset().left; $('body,html').animate({ scrollTop: left }, 1500); });
  11. Hi, I am trying to recreate the animation which scrolls between content on one scroll back and forth. I have seen people achieve this effect with scrollmagic, i am comfortable with GSAP3 and want to know how can i achieve this with ScrollTrigger + GSAP. Reference: https://www.sequoiacap.com/india/
  12. I'm looking for a developer to convert this slider into React. This was what I had started. It's still missing the infinite loop and auto play feature. function MediaGrid ({title, text, media}) { // Create variables let slider = useRef(null); useEffect(() => { gsap.registerPlugin(Draggable, InertiaPlugin); // Make slider draggable Draggable.create(slider, { type: "x", inertia: true, }, []); }); return ( <section className="block media-grid" style={background}> <div className="slides-container" ref={el => slider
  13. Hello there, I made a slide animation using gsap. However, pressing the button may cause the animations to be out of order. I cant find the cause.... If there is a way how can I fixed this problem?
  14. <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) {
  15. Hi, I'm trying to successfully pin two separate elements on the same page: 1. The first section (100vh) which is stacked above the rest of the page. As I scroll I'd like it to move yPercent: -100 out of view. The rest of the page (the other sections) I would like to act normally, no stacking, it should move as a single body. 2. I have a sticky nav in the middle of the page that I'm trying to pin to the top once it's in view and end at the end of the html I'm working off of the `Layered Pinning From Bottom` ScrollTrigger example. I have 1 working b
  16. I am using gsap to change the position of camera in threejs . I need to control the speed of gsap.to() . Below is my code for changing the position gsap.to( camera.position, { duration: 1, y: 5, } ); Now I need to control the movement speed of it. How to do that. Thanks in advance.
  17. Hi there. I'm a Japanese creator. Please forgive me for my poor English. Thank you for adding the ScrollPlugin. I wanted to add heavy scrolling to the site and give users a special experience. The way to do that is to use document.addEventListener("wheel") to detect how much power you scrolled from event.deltaY and process the value and transform the container class to How to move it. However, we could not benefit from scrollTrigger in this way. How can I benefit from ScrollTrigger? What I want is a way for scrollTrigger to work using the
  18. 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
  19. Hi, so I have created multiple backgrounds which I would like to squeeze and expand as shown in my codepen example. However, trigger position gets messed up everytime I resize the window, the <img> will be gone and the start position is shifted. 1) How do I keep everything as it is even on window resize? 2) And also because I will be making quite a few of these backgrounds and repeating the squeeze and expand for each of them as shown in my Codepen, I'm wondering if there is a more effective way to do it rather than having one timeline for each background? I've noticed some
  20. I am playing with spiral animation using tweenlinemax, I saw couple of examples related to spiral animation for growing text font size during animate but I also want to reduce the size of font after 1 second duration. tl.to("#Text",10,{attr:{startOffset:'100%'}}) .to("#theText", 5, {fontSize:50},2) .to("#theText", 5, {fontSize:10},1); //this is not working so is there any way to grow up and down the font size while animate on SVG path using tweens.
  21. 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.
  22. Hi everyone, I'm trying to play a short video clip on mouseover and play it reverse on mouseout: mouseover: video.play() mouseout: video.playReverse() As there is currently no native function for playing a video reverse, I tried it with setInterval by manipulating currentTime, but this solution is not smooth enough. Is there a smooth solution with GSAP to play a video backwards?
  23. Hi everyone, I'm looking for a way to replicate this effect of this website prototype. It seems like a liquify filter is applied to the images, and when the page scrolls the image is restored. I searched both on this forum and on google but I did not find solutions that could do for me. I'm not a javascript expert, I don't know how to reproduce it. I saw that beyond gsap there are libraries like webgl or curtains.js or pixi.js. Do you have any idea how this can be done? Thank you. https://dribbble.com/shots/6749793-Supreme-Landing-Load-States
  24. I'm trying to do my first ScrollTrigger animation where I have two sections inside a container; first one has three boxes and the next one has a few lines of text. The goal is to animate the lines of text as the user scrolls down only after all the boxes in the previous container have been animated. I have created an example below to demonstrate this. The boxes are being animated as needed, however the lines of text begins animating, while the boxes are still animating. Also, the elements and text containers overlap each other. I'd like the text container to not overlap
  25. So I've just started learning GSAP and I recently faced a problem with something that I'm trying. So I have multiple div's with the same style as height:20px; background:red; . Now, I used gsap in this to increase the height of the div, which is triggered by clicked event, to 100px. But the problem i've faced is that when I try to animate only one div that has been clicked, both the div's seem to be animated. Now I know what the problem is here and I've even found the solution with jquery using $(this). But i want a Solution using Vanilla JS. Your help would be much appreciated. Thanks.