Jump to content

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

Search the Community

Showing results for tags 'JS'.

  • 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. This is a general GSAP/JS question. In this example, when the user hovers over each image, a short gsap timeline is played. Because there are 4 separate images there are 4 separate timelines/event listeners calling elements' specific id's. Because all 4 elements have a same class property is it possible to create one timeline and one event listener for all elements with this class. (So when slight adjustments to timeline are made, I don't need to copy and past for every element that uses the same animation?) When I try this only the first one works. Hopefully this makes
  2. Hello I'm trying to get a grabbing icon while the user grabs and holds the Watering Can (Please see update). It would also be nice if the Watering Can would rotate down when hovering over the grass. (Done, please see update) Would it be difficult to only use javascript? (I tried already a lot of things, also by attaching an image to the mouse and let it follow it. The cursor always get's standard...) Would it be easier to use GSAP? (Setting it up, implenting it in my work? ) Thank you for any advice, Kind regards, Claude UP
  3. Hello everyone, since a few months I've been working on a wordpress website (with oxygen builder) hosted on digital ocean. Recently I added page transitions thanks to Barbajs and with GSAP I have a swipe up effect. On chrome I have no problem but on Safari the site is slow to load, I don't know if it's the videos that are slow or the GSAP or barba js. The website is currently protected on a private server I can't give you access but here is a piece of my js that calls barba and gsap : function video_text_animation() { let tl = gsap.timeline(); if (tl.scrollTrigge
  4. Hi everyone. Can someone help me with animation like this ? https://miro.medium.com/max/800/1*T7YtwbVBbuhdO5g-FA5zKQ.gif The animation as usually start with delay and t looks wierd :( May be someone can give me advice or example. Thanks.
  5. Hi, I creating a website and i using TweenMax. I've created line animation like this; Its connected with scroll. Animation is like that; First left long line going down then bottom line goes to right then right line starts from bottom to top finally top line start from right and goes to left and animation is ends. At the end we had this image. But there is something it will drive me crazy. At the start of animation lines goes normal (fast). But when its ending its very slow down like smoothing. Example at the start of animation i scrolling 1 click, lines with changes
  6. Image is getting called multiple times in network section of dev tools. when i am using BezierPlugin GSAP 2.1.2 and assigning image as css background issue.zip
  7. I am new to ScrollMagic and still learning JS, I am trying to have the second slide in my codepen to last longer when you scroll through it. Right now in my #slideContainer, I've set width to 1000% because this sets the width of the pages to be expanded and have longer scroll when scrolling through them horizontally. #slideContainer { width: 1000%; height: 100%; position: absolute; } What I want is to only have this effect for a single slide only, in this case, only for Page two. I tried making another #slideContainer, which I named #longerScroll (it is commented out now) whe
  8. hi everybody, how proceed to mix diferente ease at start and end : i cant find doc? It possible ? Example: Something like thats, assuming the tween compute the half/time in the process ? TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:[Back.easeIn.config(1.2), Bounce.easeOut], }); or like this ? TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:{ start:Back.easeIn.config(1.2) , end:Bounce.easeOut }, }); or ... TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:{ '0':Back.easeIn.config(1.2) , '0.5':Bounce.easeOut }, }); or...
  9. hi guys how i can kill all current animation from target objet ? Related to doc , am not sure am understand. i get `TypeError: TweenLite.kill is not a function` so here the example what am target. Hold click will power Shake the hud. But if release click befor i click shakes animations, i want kills. So here my experiment When downClick pointerDW(e) { TweenLite.to(this.sprites.c2.scale, 0.2, { x: 3, y: 3, ease: Back.easeOut.config(1.7) }); this.sprites.c2.alpha = 0 TweenLite.to(this.sprites.c2, 1.3, { alpha: 1,rotation:Math.PI, ease: Po
  10. Hey so I'm currently making an animated graph to show how often I skip a song on Spotify. All I'm trying to do right now is bring in "Spotify" however no animation plays despite chrome dev tools saying there is no error. Also, I commented out line 209 in my HTML because for some reason it cannot link my DrawSVGPlugin. If anyone can help with one or both of the problems I'd greatly appreciate it; thanks.
  11. Hi! If I use multiple times without a variable reference //var myVar = TweenLite.delayedCall(); TweenLite.delayedCall(); If I do not call the .kill(), it will increase my memory? Or the delayedCall() have an onComplete() Event to be able to kill() after the calling.? I use the delayedCall() in a loop multiple times with different parameters... Thanks a lot.
  12. 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
  13. Hello! I'm find the perfect animation example but it works only on one image and in default mode (autoplay on page load). I need to init this only on mouseenter event and for each current image. Important note: In this example hover works, but I need to copy animation effect, which works on page load, to hover event. The default hover animation isn't correct for me. Thanks This is example in codepen with default animation Init script var spriteImages = document.querySelectorAll( '.project-image' ); var spriteImagesSrc = []; for ( var i = 0; i &l
  14. Hi, I was looking for animation on scrolling and i came across this So I played with it a little. I used scrollmagic to pin the layout during the duratoin of the box animation. So now i want to create similar animation timelines, with few changes. How do i put an individual timeline into a function and call it on scroll. Ive tried this syntax, but it doesnt seem to work : jQuery('.Screen').each(function () { var currentScreen = this; new ScrollMagic.Scene({ triggerElement: currentScreen, duration: 2000, offset: iScreenSize_H }) .on('s
  15. POST RESOLUTION EDIT: See Zach's comment below for a more modern approach to this problem. ---- Hi there. I have a responsive site where I want the content to stagger reveal as the user scrolls. The issue I'm having is that on load, the first few items (depending on screen height) are above the trigger and therefore just animate in together as opposed to staggered. Is there a way to have it so that the content that loads immediately staggers, and then the remaining elements animate like normal on scroll via ScrollMagic? ScrollReveal has a pretty
  16. Hello, This it's my first try with GSAP and I'd need your help to understand how should I think to solve the animation process. I want to achieve Violet water drop falls down on black background Then letters start animating - For extra effect I would break "V" letter into two paths so both lines they can get animated simultaneous. My problems: My main problem is how to control timing and control visitability of these paths or groups via js How can I hide cyan letters on the beginning and start with letters animation when the water drop falls i
  17. I'd like to say hello to everyone at the beginning. I'm a novice in JavaScript world and I have a question. I tried to create navigation for my first GSAP slider and I have no idea how to get started. I'd be grateful for all the tips. Regards, Novice
  18. Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa. Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.
  19. Hi, Just a neat little thing I discovered today, when using a calaculation in JS with the a possible output of 'NaN' you can prevent errors like this: var newWidth = value1*value2; TweenMax.set(element,{ width:newWidth || 0 }); Hope this helps someone out, regards, Ivo
  20. I try to copy this website to study and I found that my fonts are not smoothly. I would like to gain your suggestion how to make website like this. Thank you, Kopkap. http://www.carlsberg.com/170/
  21. Hey guys ! I've been trying to make this slider for the couple couple of days without much success. I have a slider and I'm trying to every time it finishes, it goes back to the first image, but it just stays in the same. Here is a snippet of my js. $(".right-arrow").click(function() { var contentSlides = $('.slider .slide'); var currentSlide = 0, tl = new TimelineMax(); tl.fromTo(contentSlides.eq(currentSlide), 0.4, {webkitClipPath: "inset(0 0 0 0)", x: 0}, {webkitClipPath: "inset(0 0 0 100%)", x: 10
  22. I'm building an intro animation in Codepen and I wanted to tween the pseudo element `.marquee__tagline--logo::before`. I saw that this can be done using CSSRulePlugin, however it is just keeps throwing out errors. The pseudo element is showing up in dev tools, and it clearly is rendering on the page, so I'm unsure of what I'm doing wrong here. Any help would be greatly appreciated!
  23. In the attached codepen I have a timeline in which `blocks` stagger into the display. That all works fine and well, but I'd like to make it so that the `autoAlpha` property runs a bit quicker than the rest -- for instance 300ms rather than 600ms. Is there any way of achieving this type of interaction with certain properties within a stagger going quicker than the rest?
  24. Hi, I was using these two scripts in my HTML5 banner ads: <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> I had to put these two banner ads through google so as per the https://support.google.com/richmedia/answer/6307288, I changed the above scripts to: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="htt
  25. Hi! I would like to know if there's a way to animate a HTML video. What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds. For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: https://codepen.io/sonder15478/pen/Ppeyry Any ideas of how to do it?