Search the Community

Hi community! I'm new here and wanted to explore the power of GSAP. I want to replicate the 3 images rotating on this site through GSAP. I've got a working Codepen. However, in my code pen, the images are not linked to the speed at which the user scrolls, as seen on the demo site. I was able to slow it down to make it close enough, but the images need to rotate 360 degrees, and the rotating speed is dependent on how fast the user is scrolling. I was thinking of using the .getVelocity(): method, but I could use help setting up my function. Demo site: https://www.andrewleguay.com/ Codepen: https://codepen.io/keertea/pen/QWXVVbr?editors=0010 Any help will be appreciated, thank you!! 🙏✨

I just tried to create a box and animated it after. I'm following this tutorial: https://gsap.com/docs/v3/GSAP/ My background successfully changed so I think my GSAP has already been imported correctly. But my box doesn't show up. I'm new to Javascript. Any help will be appreciated.

I am trying to make an animation just like the video that I have attached. The one that I have attached is also made by me, but I am facing a lot of issues because the one that you are seeing actually the animation which is getting produced due to some problem that i cannot resolve. I am very new to GSAP. I am using ScrollTrigger plugin for the animation that I want. Also, I am attaching a link to a video to show the complete issue that I am facing ( link" https://drive.google.com/file/d/10u0dioPKN8ykGuYdUKn2c9FHsANLW7IF/view?usp=sharing ) . Following is the code ( I am using React ), and I am using no other CSS property or any other javascript either. This is the only code that I have written: import React, { useRef, useEffect } from "react"; import { mbp } from "../../img/imageModule"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const Intro = () => { let mbimg = useRef(null); useEffect(() => { const el = mbimg.current; gsap.fromTo( el, { scale: 1.3, }, { scale: 0.75, scrollTrigger: { trigger: el, markers:true, start: "clamp(top top)", // end: "clamp(bottom 50%)", scrub: true, pin: true, }, } ); }, []); return ( <div className="hero-section relative"> <div className="hero-image"> <img className="mbp zoom" src={mbp} alt="macbook-pro" ref={mbimg} /> </div> </div> ); }; export default Intro; Screen Recording 2023-06-13 at 19.08.53.mov

I wish when they click and hold the header with id #mydivheader they move the whole card with id #draggable. I am sending the link, so if someone can write me the code and explain how it works, I would be very grateful. The site is on webflow. https://nemanjas-groovy-site.webflow.io/

Hello, I want to create this distortion effect when scrolling: video of the animation I'm a complete beginner to GSAP like I don't have any basics, but I can learn quickly with the appropriate code, and I'm sure it's possible to do it with GSAP. I already looked at some topics on this website, with the property skew, but it doesn't skew from the center of the image. Furthermore, I want this animation to be vertical, not horizontal like in the video. If anyone can help me with an easy-to-understand solution, that would be awesome.

Can anybody show me a quick tutorial of how to integrate GSAP onto GRAV CMS? Aside from the declarations, I would really like to know how it should work. Since grav uses diff partials for each section while gsap treats it as one page am I right? Im relatively new to both GSAP and GRAV. If anyone could help me, it would really be great!

In another thread - I had posed a question about tutorials that seemed as though it had a fair amount of support. This thread is for sharing some of those ideas. As I played around, I ended up with something slightly different than my original thoughts but the general concept remains. This is the first of hopefully many which I will continue to link in this thread as I make them. Remember - these are aimed at beginners just like me. Happy to entertain any ideas to make them better. Please enjoy "Tales From A Rookie". Episode 1: Rotate An Object

This is literally my first animation with GSOP, I have some understanding of Js and a good grasp on HTML and CSS but I am confounded. I have been trying to get this to work for the better part of an hour to no avail. Thank you for any help. Sorry, to clarify I know that the image isn't loading in the pen, but I'm mostly concerned for the animation. The image loads fine on my computer because that's where it's source is.

Hi everybody! I am completely new to GSAP. First of all I´d like to notice that I really have a hard time to get into this stuff. The documentation isn't that good for a beginner. I neither don't know what kind of plugins or other 3rd party java stuff is needed to use the gsap plugins, nor I really do not get it how to call up funtion to do something with gsap. So, how did I get here? I already programmed a little website for a geocache listing, but on mobile devices the site is kind of slow. Somebody told me to "do the trick" with gsap because it is much faster than jquery. My goal is to change the colors of pictures, borders and text when a checkbox is clicked. Here you can see what I mean: My example website I removed the images (actual code not in the example page) and now want to draw one corner image in 4 canvas. Here is what I got so far. <script> window.onload = function() { var canvas = document.getElementsByClassName("edge_can"); // I gave the canvas a class named "edge_can" / not on the example page! var ctx = canvas.getContext("2d"); var img = new Image(); img.src = "https://www.tissi-solutions.de/caches/matrix/edge.jpg"; ctx.drawImage(img,0,0,100,100); }; </script> Do the canvas need all one "id" or can I use a class to draw 1 picture in multiple canvas? How do I do that? Do I really need canvas for this or can I manipulate the colors by just calling a gsap funtion? Which plugins are needed to change all mentioned colors? Do I need PixiJS for the Pixi plugin? Am I on a right approach or do you think that the speed won´t improve by changing to gsap? Any suggestions are welcomed! Thanks in advance! Tissi

Hello friends; First of all my English is bad, so I apologize. I'm new in GSAP world, I am studying a carousel Swipe provided by another member of the forum. following link: http://codepen.io/bdang/pen/pJyYEO My doubt be the next point, when you run the onPressed event in Draggable in the middle of execution of TweenMax, it overwrites the position x performed in transition by Tweenmax.to (), is there any possibility to disallow the onPressed or the default event while the animation TweenMax is active? Thank you.

I'm SO lost. I've used TweenMax back in the Flash days and I code mobile sites. But, I can't figure out how to load images with GSAP. Tell me where I'm getting it wrong. I have a bunch of pngs for a banner that I need to animate. I thought I could img src="whateverImg" in a div, give them an id, add some css and animate it by id in main.js w/ TweenMax. Is the only way to import the image in the css as background: url(img/whateverImg.png)no-repeat; ? None of the tuts seem to make this clear for a noob Thanks, Pulling my hair out

Hey everyone, lets say I have a div with text inside. tweening the scaleX squishes the text inside but tweening the width, correctly only animates the div.. TweenMax.to(header, 2, {delay: 2.2, width:"0px"}); //vs TweenMax.to(header2, 1, {scaleX: .5, delay:.2,transformOrigin:"0% 0%"}); Ques: Is there a way to scale using transform/scale without scaling the text inside the division or is that just how CSS works... on initial search, i didnt see this discussed elsewhere Thanks in advance, alwayz

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.

I have put together a compilation of 11 short videos with quick demos explaining the basics of GSAP API to a complete beginner. If you just staring out with GSAP this might be a good place to start. Go To GreenSock 101 Happy tweening. PS: If you happen to sign up and go through the free course, please let me know what you think about the content. Your feedback is very valuable.

Hello everyone, I've just started learning GSAP and jQuery today with the help of ihatetomatoes and this excellent forum. I'm trying to make a hover-able floor plan map that displays information on the currently-hovered room. So far in my proof-of-concept, I have implemented this using TweenMax's hover and TextPlugin. I just have a question about implementing the rest of the map. Instead of individually making a separate function for each block, is there a more elegant way to implement an array so that when you hover over a shape, it changes hoverText to an assigned message? I also plan to have buttons to switch between floors of the building, but I'm assuming that won't affect how the array should be constructed. Thank you very much for the help, and apologies if there's unnecessary fluff in my codepen.

I just got my feet wet with Tweenlite, and created a simple 300x250 display banner. It has a single image and a few lines of type that tween in and out. I was done and saw my file size was about 27kb. A typical banner that size I can get to about 12-15kb, but without the buttery motion GSAP has... I ran an output report and pasted it below... It looks like the 16,000 AS bytes took up a big chunk of the swf. Since Im just doing basic banners, should I stick to Flash's native tweening instead? I also pasted my Tweenlite code below the report, if there's something Im doing that could be bloating the file. I get the possibilities of GSAP being powerful, but I am not at the level currently to use it as a go between between native/timeline tweens and GSAP code. Any thoughts? 300x250 test.swf Movie Report ------------------------------ Metadata -------- Bytes Value ---------- ----- 939 <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/"> <xmp:CreatorTool>Adobe Flash Professional CS6 - build 481</xmp:CreatorTool> <xmp:CreateDate>2014-11-03T09:50:24-05:00</xmp:CreateDate> <xmp:MetadataDate>2014-11-04T15:26:42-05:00</xmp:MetadataDate> <xmp:ModifyDate>2014-11-04T15:26:42-05:00</xmp:ModifyDate> </rdf:Description> <rdf:Description rdf:about="" xmlns:dc="http://purl.org/dc/elements/1.1/"> <dc:format>application/x-shockwave-flash</dc:format> </rdf:Description> <rdf:Description rdf:about="" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#"> <xmpMM:InstanceID>xmp.iid:EAB7B9250D2068118083F07BA108F061</xmpMM:InstanceID> <xmpMM:DocumentID>xmp.did:EAB7B9250D2068118083F07BA108F061</xmpMM:DocumentID> <xmpMM:OriginalDocumentID>xmp.did:F77F1174072068118083A353E50FFFFA</xmpMM:OriginalDocumentID> <xmpMM:DerivedFrom rdf:parseType="Resource"> <stRef:instanceID>xmp.iid:F77F1174072068118083F07BA108F061</stRef:instanceID> <stRef:documentID>xmp.did:F87F1174072068118083A353E50FFFFA</stRef:documentID> <stRef:originalDocumentID>xmp.did:F77F1174072068118083A353E50FFFFA</stRef:originalDocumentID> </xmpMM:DerivedFrom> </rdf:Description> </rdf:RDF> Frame # Frame Bytes Total Bytes Scene ------- ----------- ----------- ----- 1 30026 30026 Scene 1 (AS 3.0 Classes Export Frame) Scene Shape Bytes Text Bytes ActionScript Bytes ------- ----------- ---------- ------------------ Scene 1 38 0 16116 Symbol Shape Bytes Text Bytes ActionScript Bytes ------------- ----------- ---------- ------------------ arrow_mc 0 0 0 background_mc 0 0 0 base_mc 28 0 0 button_png_mc 0 0 0 headline_1_mc 0 217 0 headline_2_mc 0 84 0 logo_mc 494 0 0 subhead_mc 0 147 0 Font Name Bytes Characters ---------------- ---------- ---------- TradeGothic-Bold 3541 .?ABCDEGHIJLNOPRSTUWYaceghiklnoprtuvwxy ActionScript Bytes Location ------------------ -------- 16116 Scene 1:Frame 1 Bitmap Compressed Original Compression ---------------- ---------- ---------- ----------- background_a.jpg 5858 300000 Imported JPEG=102 Untitled-1.png 549 10212 Lossless button(1).png 1411 4640 Lossless import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([FrameLabelPlugin, ColorTransformPlugin, TintPlugin]); import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.BlurFilterPlugin; TweenPlugin.activate([blurFilterPlugin]); //moves headlines off stage TweenLite.to(headline1_white_mc, 1, {x:-250, y:137.2, delay:6, ease:Sine.easeOut, blurFilter:{blurX:10, blurY:10} } ); TweenLite.to(headline1_bronze_mc, 1, {x:527, y:137.2, tint:0x996007, delay:6, ease:Sine.easeOut, blurFilter:{blurX:10, blurY:10 } } ); //moves final headline onto stage TweenLite.to(headline2_white_mc, .75, {x:203.65, y:63.65, alpha:1, delay:7, ease:Sine.easeOut } ); TweenLite.to(headline2_bronze_mc, .75, {x:203.65, y:63.65, alpha:1, tint:0x996007, delay:7, ease:Sine.easeOut } ); //moves white base block and white arrow onto stage TweenLite.to(base_mc, 1, {x:150, y:225, delay:8, ease:Sine.easeOut } ); TweenLite.to(arrow_mc, 1, {x:239, y:183.95, delay:9, ease:Sine.easeOut } ); //fades in final elements TweenLite.from(logo_mc, 2, {x:239, y:208.55, alpha:0, delay:10, ease:Sine.easeOut } ) TweenLite.from(button_mc, 1.4, {alpha:0, delay:9.75, ease:Sine.easeOut } ); TweenLite.from(subhead_mc, 1, {alpha:0, delay:10, ease:Sine.easeOut } );

I'm trying to get a Kinetic sprite to change it's animation after the tween it's attached to stops. As of now the sprite changes when the tween starts. Would this just be a callBack function? I know how to do this with pure Kinetic, however, I'm using the KineticJS plugin for the controls. I have my code included in a text file and the area I'm refering to is highlighted. Anyone have some suggestions? script.txt

Hi I'm looking to start out with GSAP for a project. I am building a parallax scrolling site with animated elements as the user scrolls down the page. My approach is to use a framework for the repsonsive layout, an existing jquery script for the parallax scrolling and GSAP for animating the more complex animations work? Is this a logical approach or should I be looking for a more GSAP focussed approach? My concerns is taking too much on with GSAP as I have time constraints. II would be grateful of your thoughts.