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, as you can see I'm new to the house. LOL I am now starting to use GSAP, and have a website that I know it uses, would like to know the best code to create this animation to load with percentage of the page, with hide in the image and show after the animation. Take the example: https://www.melville-design.com (site using greensock)
  2. Hi everyone, So I'm looking at making an interactive timeline of famous people in history and there will be hundreds of people with associated data. I'm using react (gatsby specifically). I want to be able to map through the data object and render about 10 people at a time on this pathway, and it looks like they are at the back of the path. Then, when the user scrolls down say, the people move forward towards the user, on the timeline. Then when they get to the front of the timeline they fade away. In the meantime more people have appeared behind them as the
  3. Hello, I was wondering if there's a way to use greensocks Splittext to create a typewriter-effect starting from the center, so that the first character starts in the center an the whole sentence will move to both sides, like in the example on codepen below Thanks, Tobias
  4. I'm trying to accomplish something and I'm not sure how to approach it or what direction I should go in. I am using Scrollmagic, however, I think this pertains more to fromTo()'s position attribute and timing. I have an animation where I want background images sliding up on one half and sliding down on the other half. I have achieved this. The second part is I want overlayed text fading in and out while the scrolling is occurring, too. Scrollmagic binds to the "duration" attribute, so 1 = the duration of the pinned scrolled element. The timing I have for that backgro
  5. Moving an existing es6 animation project from Webpack 3 to Webpack 4 I'm facing a weird phenomenon according to the _gsTransform object when I move from 'gsap' to 'gsap/all' imports. Maybe it's the very high temperature here at the moment, but I can't really get my head around why this is... At the moment unfortunately I can't find the time to create a small project to show you guys, but if I can find the time later on I'll setup one. If I can't fix this with 'gsap/all' I'll stick with 'gsap' on this project for now and fix it later, but it would be great if maybe by chance anybody faced
  6. Lets have a look at this awesome 4 column animation. Website: orangina.eu Any idea how to make the 4 column hover animation using gsap?
  7. Hi, I have build a really small component (see codepen) which is a list of entries with the first being sticky element. I would like to scroll to an entry which seem slightly buggy due to the sticky element, or I am doing something wrong. If you click on the the last element you will see what the problem is. It works well for entries where scrolling is required, but if en entry sits at the end (entry 9 for instance), where we can't scroll to, then the scroller does not scroll to very end but leaves the gap at the bottom (offset of 30px). Is there a way around this (without adding a margin-bott
  8. Hi, as the title says... If I read correctly drawSVG draws a stroke of a path (or other shape). In this case I have a somewhat simple path. I want to have it drawn, but can't seem to figure out what i'm doing wrong here. The result are not what I expected to say the least The goal is to have a signature drawn with svg paths (as if it was written realtime) But when clicking on a button I see a lot of points, within the paths, being hustled around and then stop. The first SVG was drawn with the pen tool in Illustrator.
  9. First of all, congrats for all stuff GSAP! This is a wonderful piece of work! Secondly, I've encountered issues with Draggable, while using React 16.5: Using Draggable.create(target) doesn't allow the user to drag the element at all. A 3d transform is set on the element, having all 0px values, but the element itself doesn't move. The onDrag / onDragEnd / onDragStart handlers aren't called. On the other hand, the onPress handler is called, but two times every click, once with a PointerEvent type event payload, and with a MouseEvent, the second time. Also, it's important to poin
  10. I have in the attached codepen a very simple animation, where I want the '.delivery' box to appear when the trigger is initiated. Not as soon as the page loads, which is what currently happens. Thanks for any help.
  11. Hi, My issue is to do with triggering a nested timeline in reverse, using Greensock and ScrollMagic. I realise ScrollMagic is a separate library but the difference in behaviour I am experiencing is to do with creating timelines either inside a function, or directly on a scrollmagic scene, so I hope somebody can possibly help. I have created two codepens that sort-of replicate my issue. Unfortunately my actual issue is client work so I can't show the same code. But I've recreated the crux of the issue. Additionally my actual code has a pinned element rather than these elements
  12. Hi, I have a small issue with the Scrambletext plugin using the wrong lengths for the text ( in an SVG ) Most of the strings start scrambling with too many characters, it also still happens if I define the 'text' parameter Can't work out why? Is there a workaround to force a specific length? Thought it may be to do with the tspans, but I experimented with removing some and it didn't seem to make a difference ?
  13. Hello, I have a button. When a user hovers over it then blue overlay will come and slide from left to right and stop until the mouse leaves. There is no issue here. It's working. Now If the user removes the mouse hover then I have to end the blue overlay from left to right and It will come on the normal button. When I remove the mouse hover it's going to the right to left side. Also when hover on the button "How can I change the color of text and arrow"? Thanks in advance.
  14. Hi All, I am new to js animation, can someone explain me how the nav transition works on http://magacom.fr , i want to make the effect with barbajs and #GSAP . Can Someone help with some code example.
  15. Hello, I'm trying to create a SVG circle with an animation. It work but when I'm resizing the window, the circle animation is not responsive : the animation accelerate or deselerate by the window resizing. If wee decrease the size of the window, the animation does not end correctly. Exemple : http://guillaumeduclos.fr/circle/#/ My code : <svg xmlns="http://www.w3.org/2000/svg"> <circle ref="circle" cx="50%" cy="50%" r="50%" fill="none"/> </svg> svg { overflow: visible; width: 100%; height: 100%; border: 0px solid red; transform: rot
  16. 0down votefavorite I am pretty new to GSAP and like using it so far, however, I have a question on how to do some relatively simple animations with react.js involved. I have two divs and an arrow in the middle. What I want is when a div is clicked the arrow will animate and move under the div that is clicked. And if the other div is clicked then the arrow will move under that div. I feel like this is easily done with HTML/CSS but incorporating it into react has been difficult. Any help is greatly a
  17. Hi, I created a simple pen just to show you the issue I am having in my real project and is related to the transition-delay because I need the animation starts only when the mouse stays in the element the desire time and not before, with CSS is easy because the transition-delay is the one for the job but I don't know how to do the same using JS/GSAP, do you have any idea? In the following example you can see that if you pass your mouse over the orange div, the animation will be triggered only if you stay for more than 0.5s so you can like move your mouse over it and the
  18. Hi all, I am trying to get into Bannertime and its a bit of a learning curve but can see the benefits. I am trying my current banner timeline setup to work with it. In the Bannertime example this is how the animation is called and animated. /** * Animation timeline. */ Banner.prototype.animate = function () { var _this = this; function loop() { _this.timeline.gotoAndPlay('start'); } this.timeline = new TimelineLite({ onComplete: loop }) .addLabel('start', 0) .add(TweenLite.to(this.logo, 2, { autoAlp
  19. Anyone here familiar with weborama HPTO and how the hell it works? there is so little documentation that is hard to simply preview a file just to work on it. http://specs.weborama.nl/nl/html-publisher-persgroep-vk_parool-hpto
  20. Hello, I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag. Now my issue is, I have two tabs called as part1 and part2. There is no data in part1 but I have 3-4 anchor tags in the part2. I have to set a smooth scroll for that. I don't want a smooth scroll when the user clicks on part1 or part2. <div class="tabs"> <ul class="tab_click"> <li class="
  21. I'm forked pen from jonathan https://codepen.io/jonathan/pen/NqZPwd So I'm need to create image animation on hover and on mouseleave reset image to default state. Now animation works well on hover and stopped on mouseleave, but image doesn't reset to default. So, how I can achieve that? Ideally, I need the same image hover effect like in this site https://www.juliebonnemoy.com/ (project's images after clients list) Thanks
  22. Hello everyone! I just started using the GSAP library a few days ago and I am having an absolute blast! However, I have been struggling to achieve this fade-in effect for a page I am building (check it out here). The idea (just like in the codepen that I linked and the actual page) is to have the page fade-in from above when the DOM is loaded. Initially, I just added a fromTo Tween, then I added the window.onload function and inserted the code in there. Both "solutions" failed, as the content appears and then the animation procs. I wanted the animation to proc as soon as the DOM is
  23. Hi all! I'm working on finding the "best way" to approach animating the width of an object using the current implementation of GSAP TimelineMax paired with ScrollMagic: https://gist.github.com/jodriscoll/bda71b0245776294779cc1f9573186cd As most of you may know, animating the width of an element does not leverage the GPU, causing a reflow of the DOM, which is bad for performance, can break with bad JavaScript, reduces the 60hz/fps target, etc., etc. Unfortunately, I noticed the way the TimelineMax animates an object's property is through transform: matrix3d(). Which
  24. Hey guys! I'm relatively new to GSAP, and I've search the forums for image glitch effects on hover to no avail. I'm looking to make an images on the page glitch on mouse hover similar to the effect on the text in the codepen. Is this possible with GSAP? Thanks in advance!
  25. Hi all, I would like to know how to get this result, or do I have to look in the documentation to make animations like this developer ? http://eric-huguenin.com/ tanks you verry much :)