Search the Community

i only started using gsap recently, i wanted to use the ScrollTo plugin to animate a horizontal scroll via buttons. but i can't make it work i don't know what the issue is :'(( gsap.registerPlugin(ScrollToPlugin); const avis1 = document.getElementById('avis1'); const avis2 = document.getElementById('avis2'); const avis3 = document.getElementById('avis3'); const b1_2 = document.getElementById('b1_2'); const b2_3 = document.getElementById('b2_3'); const b2_1 = document.getElementById('b2_1'); const b3_2 = document.getElementById('b3_2'); b1_2.addEventListener("click", () => scrollAvis(avis1, avis2)); b2_3.addEventListener("click", () => scrollAvis(avis2, avis3)); b2_1.addEventListener("click", () => scrollAvis(avis2, avis1)); b3_2.addEventListener("click", () => scrollAvis(avis3, avis2)); function scrollAvis(container,targetElement){ // console.log(targetElement.offsetLeft); // console.log(container.offsetLeft); gsap.to( container,{ scrollTo: { x: targetElement }, duration: 0.5, ease: "power3.out" }); // console.log(targetElement.offsetLeft); // console.log(container.offsetLeft); } any kind of help is appreciated

i'm trying to make a horizontal scroll (on x axes) but it doesn't seem to work const avis1 = document.getElementById('avis1'); const avis2 = document.getElementById('avis2'); const avis3 = document.getElementById('avis3'); const b1_2 = document.getElementById('b1_2'); const b2_3 = document.getElementById('b2_3'); const b2_1 = document.getElementById('b2_1'); const b3_2 = document.getElementById('b3_2'); b1_2.addEventListener('click', () => scrollAvis(avis1, avis2)); b2_3.addEventListener('click', () => scrollAvis(avis2, avis3)); b2_1.addEventListener('click', () => scrollAvis(avis2, avis1)); b3_2.addEventListener('click', () => scrollAvis(avis3, avis2)); function scrollAvis(container,targetElement){ gsap.to(container, { scrollLeft: targetElement.offsetLeft, duration: 0.5, ease: "power3.out" }); console.log("excecuted"); } could i get a little help please?

Hello, I'm new to GSAP and JS in general, but I wanted to add animation to my burger menu on click. let typeSplit = new SplitType(".mobile-menu-page-container", { types: "lines, words, chars", tagName: "span", }); // plain JavaScript version document.querySelector(".burger-wrap").addEventListener("click", function () { setTimeout(function() { gsap.from(".mobile-menu-page-txt .char", { y: "110%", opacity: 1, rotationZ: "10", duration: 0.2, ease: "power1.out", stagger: 0.05, }); }, 200); }); Everything works on the first click, but if I open and close the menu, it looks strange. What can I do? Thanks RPReplay_Final1706268273.mp4

Just starting out. Trying to animate clip-path on scroll. It's working but the left side doesn't transition out.. It just jumps to end, the the right side plays fine. Can anyone see what Im missing??? thanks T

Hi I am new to gsap and new to astro.. so please excuse the 'newbieness'..;-).. I was trying to install gsap on astro and wanted to know the best way forward.. I tried the CDN and the npm install but both didn't work and they gave me this error in the console Uncaught TypeError: Cannot set property window of #<Window> which has only a getter So in astro does one do the import (import {gsap} from 'gsap') within the frontmatter part or do we need to do anyting in the astro.config.mjs? I recollect having similar issue in the past when I was experimenting with gsap with Vue3 but finally the CDN method worked there.. but in astro I can't get it to work with the CDN too.. Some hand-holding would be appreciated. I love the product and it works well on codepen etc but I'd like to use it on a personal project using astro. Regards, Alim

Hey all, I am using Adobe animate and am a beginner in GSap. I am trying to do a hover over effect but somehow... cant get it to work. Above the script i have placed this. var textDisplay = root.textDisplay_txt; in the animate canvas i have a dynamic text object with the corresponding instance name "textDisplay_txt" so now i need to get some text in there when i hover over a logo. In this case an AMD socket logo. (could even be an image map or anything else for that matter i guess) The eventlisteners work.. i just dont know what to use here as a property, scaling works. Note the line text? : <p>blabla</p>... thats where i need to do somehting i think., though i am pretty clueless at this point. root.logoAmd_mc.addEventListener('mouseover', logoAmd_over); root.logoAmd_mc.addEventListener('mouseout', logoAmd_out); function logoAmd_over(){ var logoAmd = root.logoAmd_mc; gsap.to(logoAmd,{ scaleY : 1.1, scaleX : 1.1, }); gsap.to(textDisplay,{ text? : <p>blablabla</p> }); } function logoAmd_out(){ var logoAmd = root.logoAmd_mc; gsap.to(logoAmd, { scaleY : 1, scaleX : 1, }); }

Hello, I'm trying to create the sketch shown in the demo with a very simple timeline that is activated on a button click and then reverses. The reverse command does nothing as far as I can see. I tried to do the same thing here without any buttons, but reverse also does not work here https://codepen.io/louise-temple/pen/GRxJXPW What am I missing?

Hi guys, a bit new to this gsap thing. I saw a few threads around here talking about how to use gsap for landing animations that also utilise localstorage. I have some code at the moment for this, but it seems as if gsap is breaking on the initial load, cancelling the animation entirely import React, {useRef, useEffect} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import Nav from './nav' import {TweenMax} from 'gsap' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'); ); export default function App() { let app = useRef(null); let loader = useRef(null); var animPlayed = localStorage.getItem("loadingAnimPlayed"); console.log(animPlayed); if (!animPlayed) { // This is the localstorage animation to be run. console.log("Loader run"); TweenMax.to(loader, 1, { opacity: 1, onComplete: function() { localStorage.setItem("loadingAnimPlayed", true) } }) } useEffect(() => { TweenMax.to(app, 0, {css: {visibility: "visible"}}) }, []) return ( <> <div className="loader" ref={el => {loader = el}}></div> <div className="page" ref={el => {app = el}}> <div className="header"> <Nav /> </div> </div> </> ) } I get a series of errors on the first load, when the condition of the animation are met, the main one being: "TypeError: Cannot add property _gsap, object is not extensible" I'm not sure how to fix my code in order to get the animation to run. Any ideas?

Hi everyone, I'm new to GSAP and having a bit of trouble getting the ScrollTo to work properly. I have gsap and ScrollTo CDN at the bottom of the body. Below is pretty much all I have in my JS file. I'm guessing I missed something in the docs just because it seemed so simple to implement GSAP.

hello! i'm new to GSAP, and honestly i have limited JS knowledge. i coded an SVG animation that works perfectly on most browsers, but we need it to work on MS Edge as well, so i'm trying to achieve it using GSAP: i manage to get the first iteration right, but then it goes out of sync. SMIL: https://codepen.io/urx/pen/XWJNgLB GSAP: https://codepen.io/urx/pen/QWwGMbq help?

Noob question... I want to make an animation of array elements 'merging' (like in mergesort). My plan was to have 2 containers: Array1 - initially 5 child divs (created in javascript) that are the elements Array2 - intially 5 child divs (created in javascript) that are the elements (different color) Array 3 -initially empty - (will end up being the 'merged' array) Now, I want my elements to 'fly' out of array1 and array2 and into my initially empty 3rd array. I want them to just end up wherever they would be if I just put them there directly using javascript (attach them to child element). I can't figure out the 'GSAP way' to do this. I can think of 1 solution (maybe?): 1. put an invisible element in array3 2. figure out the relative positions. 3. create the tween with a callback that goes and access the elements and changes it from being a child of e.g. array1 to array3 Is this a sensible thing to do? Or am I just not thinking about this the GSAP way? Thanks for any help.

Hi All, I'm new to Greenstock and to Javascript. I've been doing some corss-dissolving and swapping/zooming of bitmaps on our site with a combo of JS and CSS but the (much more advanced) developer helping me recommended that, to accomplish the type of new animations I am planning (zooming bitmaps that have animated loops playing on top of them and animations triggered by queues in a soundtrack), I should use GSAP. I've looked over some of the GSAP web pages and am impressed. My 2 newbie questions are: If I use the free version of GSAP, to build my whole app and then Greenstock goes away...do I have to rebuild the whole site? Does it look like I can achieve the level of animation described above using the free part of GSAP? (We are a NPO with no money to spend on this.) Thanks much!

I read through as much as I can find here and test with your pens by copying ma path to your example (https://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/, and there my path works!), but I cannot find my own problem with this animation. The circle path fades in, but the animation is doing nothing... I am still very new to SVG and also to GSAP, but I did read all the docs already... but I am still in the dark somehow... any hint would be most welcome! Thank you in advance! Best regards, Robert

I'm a newbie to Web Development and in the process of learning if GSAP can fill my animation needs. I am pretty sure it can. This is my second post. In my first post, I mention I am currently taking an E-course and I am in the middle of creating a javascript reaction tester application: http://codepen.io/KerryRuddock/pen/rLJPkq To view the codepen correctly, please change the View to Full Page. Click Start. A random sized and colored ball rotates around the screen based on a set of CSS keyframes: twirl This codepen is HTML, CSS and JS only, no GSAP just yet. The code is a collection of tests in CSS and Javascript. Not all of the code is used within my application, I am experimenting. Apologies for any code read-ability issues. I need to know if I can do the following with GSAP and perhaps a hint in the direction to go in. In this topic, I use the word 'tweened' to cover any object that is the middle of animation, transition, transform, keyframes, and any other time/movement speciality that I may have missed.. 1) I will be changing the reaction tester animation to GSAP I hope the switching over goes smooth. My goal is to have a 'tweened' object collision detection checking in real-time. The collision may be against a border or perhaps another 'tweened' object. I need to perform real-time interval checks of the shapes x,y position of the object during a 'tween'. Can I do this? On a mouse-event, ie. object.click(), I need to kill any tween any progress. Can I do this? On a collision-event, I need to either be-able to either a) kill 1 or more tweens and start new tweens, or modify the existing tween that is currently running. Am I able to do either a or b or both? Thanks for your time, Looking forward to your feedback.

I'm trying to smoothly morph a square into triangle, in which the top corners slowly move towards each other, and meet in the middle. If you look at the Codepen, you'll see two rectangles turning into a triangle, one after the other, and in different ways. This was my process: I created the two SVGs in Illustrator. I created a 1-pixel stroke rectangle with a transparent fill, clicked Object > Expand, and then saved the SVG using "Save for Web and Devices". The triangle was created similarly, this time by adding an anchor point in the middle of the two top corners of a square, and then deleting the other two anchor points, expanding, and then saving. In the Codepen, you'll see I used the basic line TweenLite.to("#rectangle", 1, {morphSVG:"#triangle"}); to morph my two paths. Three questions, please: 1) What's the Illustrator workflow for making single-line SVG paths in Illustrator? Like what I'm trying for above, but maybe something with curves next time. 2) How about filled shapes? 3) Am I correct in thinking I'll need to play around shapeIndex to get the animation I want?

Hello, Animation which I try to do, works well with computers or iPhone, but if it fires on Android it can munch, unfortunately, is not smooth. Maybe someone is able to help me in what I was doing wrong and how to improve? The code is a mess, but this is the first time I try to move animations from CSS to JS. The alpha version for phones was not very smooth and able to "trim". After using GSAP is much better, but it seems to me that it might be better. In addition, some questions (GSAP, JS, CSS): 1) The problem with the grid. I can not set the width (50%) plus a margin? The elements are in absolute position, otherwise when opening the remaining contents can jump. If I use the width: calc () animation can behave strangely. I tried to change position relative to the absolute (in animation), but without success. In the version of the tablet / desktop grid of 100% is replaced by 50% in 2 rows. 2) FadeOut flashes. I'm not sure what causes this? It seemed to me that zIndex, but probably not? 3) I do not know how to get 100% of the width div before animation? now the value entered is rigidly spoil responsiveness (width: '375.5px' or width '457.5px') 4) Literature, which will allow me to expand my knowledge? I know that's a lot, but maybe someone will help me? Sorry for bad english. Regards Links: http://codepen.io/Ard/pen/rLmRwK http://codepen.io/Ard/full/rLmRwK/

I would like this svg to 'appear to be drawn in a z-form. meaning top (green) line from left to right, then (red) line from where the green line leaves off and returns diagonally right to left, then finally the bottom (black & grey with shading) lines are drawn again left to right. There are two lines that form the bottom line, they should draw at the same time, each of these four lines need to be drawn separately to allow the path width to change a little across each direction change and the two lines (as well as allowing for shading of one) allows the width of the combined line to give change a little and this (I hope) lends a real sketchy nature to the final result. I understand (I think) that the there should be a tween in which each of the three individual line drawSVG effects occur (Note again that the two lines (id="line3") should draw concurrently). I was able to get the sequence right at one time, but the directions never were correct, and then it broke and would not work at all. So I have at least reconstructed it to a place that at least all the parts are present and I think the concept is pretty clear. Things that I would like to really understand; How to assign either an id or class name (I know there was much said about assigning a 'var' to each element and then using the var as the id in the svg; but there are some examples preferring use classes (not clear to me if there is a clear difference in this or cases where one works and one does not). To be honest I have found pretty much everything to be complicated (this is more a feature of JS rather than GS). By the way, I prefer a single more complicated solution that ALWAYS works than some mix of sometimes works easier methods. Once we get past the naming conventions/preferences then we have the nesting of drawing elements (timelines) or delays, either is great, but I am not totally convinced that a TL is needed for something as lightweight as this example (I do like them). Finally once this all works it is my "hope" to be able to export the shading block from the inline SVG to the CSS file. Sorry for the verbose nature of this post, I hope that this will prove helpful to others with my learning style. Something that would be really helpful is a subset of Forums that cover these just starting out sort of items. I had scanned the forum titles as well as searched for both "beginner drawSVG" and "newbie drawSVG" so I am thinking my question may be novel, but if not sorry I tried.

Hi, I have a small issue with my scroller withing my mobile app. The issue is if I'm pressing, holding and dragging (up or down to wanted position) in one action, and then lifting my finger - the scroll will continue the animation of scrolling. It's like it "stores acceleration" - If my drag action is bigger, than the scroll will continue the animation more. How can I disable this "after scroll" animation? I just want a smooth and linear scroll. Can someone help? Here is my current code: ThrowPropsPlugin.to(buttons_container_mc, {throwProps:{ y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:100} }, onUpdate:blitMask.update, ease:Expo.easeOut }, 100, 0.25, 0); Best regards, Roman

Hi there, First of all, I love the things you guys make possible. The draggable spin was exactly what I was looking for. Unfortunately I am a complete noob with javascript or any coding whatsoever. I tried to make it work for the last couple of hours, but the fact is. It is not my cup of tea. But I am willing to learn. Could someone help me by explaining step by step, in a very childish way, what I need to do to make an object spinnable in Adobe Edge with Greensock? What I did so far: Put this in the html: <!--Adobe Edge Runtime End--> <script type="text/javascript" src="edge_includes/js/ThrowPropsPlugin.js"></script> <script type="text/javascript" src="edge_includes/js/TweenMax.js"></script> <script type="text/javascript" src="edge_includes/js/Draggable.js"></script> Converted the images in Adobe Edge to symbols. And used this code on the symbol in actions click in en replacing ("#knob" with ("#nameofobject") Draggable.create("#knob", {type: "rotation", throwProps: true}); And now I am lost. Could someone help this designer lady into the language of scripting. It would probably make my life a lot easier .

hey everyone I m really interested in these tools, and oh i m totally new to everything... question, how do I install these into my wordpress site... anyone can help with a setup instruction. i typically wanna use the scroll parallax functions, have a business package no idea where to start. my brain needs an dummy Actionscript i guess.....help thanks for your time

The code below drives a button that toggles various div s on the page on and off, and changes it own visible state - from dellie to tellie: It works once as expected (usually) but the second time through,clicking dellie makes it disappear but tellie does not appear. Can anyone please help point out what I'm doing wrong? Or point to a better way of achieving what I'm after - a button that toggle show/hide div states. $("#dellie").click(function(){ TweenLite.to("#tellie", 0.5, {display:"block", ease:Back.easeOut}); TweenLite.to("#dellie", 0.0, {opacity:0}); TweenLite.to(".inacc", 0.5, {opacity:0.4}); TweenLite.to(".note", 2.5, {display:"block", ease:Back.easeOut}); }); $("#tellie").click(function(){ TweenLite.to("#tellie", 0.0, {opacity:0}); TweenLite.to("#dellie", 0.5, {opacity:1}); TweenLite.to(".note", 2.0, {display:"none", ease:Back.easeOut}); TweenLite.to(".inacc", 0.5, {opacity:1}); }); Thanks