en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en en en en en en en en sv en en en en en en en fa en en fr hbs_lat en en en es en en en ms en en en en en en en en en en en en en fi en en en en en en en en en en en en en en de en en en en en en en en en en en ca en en en en en en en en en ca en en en en en en en en en en en en en en en en en en en ca en en en en en en en en en en tr en en en en en en en en en nl en en es fr en en en en en en en fr en en en en en en ms tr nb en ms tr en sv en en en en en en en nb en en en sv en en en en en en zh nb en en zh en sv ms en en en en en sv de en en en en en ru sv nb en ru sv en en en en en en en sv en en en en en sv en en en en en en ru en nb en ru en en sv en en en en en sv en nb en sv en nl cy de en en en en en en sv en en en en en en en nb en en en en zh ru en sv it en en en en en en en sv en nb en sv en en en en en nb en ko en en en en en en en ja nb en en ja en en sv en en en en en ceb en nb en ceb en sv en en en en en en en nb en en en sv en en en en en en en en sv nb en en sv en en en en en fr en fr en de en fr en en en pt en en en fr en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
Hey all, I am using Adobe animate and am a beginner in GSap. I am trying to do a hover over effect but somehow... can't 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? :  blabla ... 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? :  blablabla  }); } function logoAmd_out(){ var logoAmd = root.logoAmd_mc; gsap.to(logoAmd, { scaleY : 1, scaleX : 1, }); }
louise000 posted a topic in GSAP
localstorage GSAP Landing page and LocalStorage
Tonycre8 posted a topic in GSAP
Trouble getting ScrollTo to work properly
HausCloud posted a topic in GSAP
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.
solved SMIL staggering animation to GSAP
plinplon posted a topic in GSAP
Move an element from one div to another?
codeminion1 posted a topic in GSAP
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 - initially 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.
New User with easy questions, I think
pfash posted a topic in GSAP
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!
SVG path animation (newbie question...)
Robert Wildling posted a topic in GSAP
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
GSAP newbie - handling mouse events, tween killing, keyframes
KerryRuddock posted a topic in GSAP
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.
Morphing a square into a triangle
meyian posted a topic in GSAP
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?
Performance issues on mobile (Android)
Ard posted a topic in GSAP
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/
Z-style underline as a focus indication in input fields
the.bolmanator posted a topic in GSAP
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.
Scroller acceleration issue [blitMask + ThrowPropsPlugin] / Newbie question
Vortexroman posted a topic in GSAP (Flash)
Hi, I have a small issue with my scroller within 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
Can someone help me to get the draggable spin to work with Adobe Edge?
joycedijkgraaf posted a topic in GSAP
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:            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 .
help, a bit lost
Jun posted a topic in GSAP (Flash)
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 want to 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
roughRabbit posted a topic in GSAP
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
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“Truly, you folks on this forum are the nicest, least judgmental, helpful people I've ever encountered.”
“I've never worked with a product that has such fantastic and enthusiastic support. GreenSock is incredible in its own right, but the team behind it is really what makes it shine.”
“Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using @greensock 's GSAP. After all these years, and impressive competitors, it's still Best In Class.”
“GSAP and CSS Transitions: I've done both, and its like comparing an F16 to a horse. Take like 10 minutes to try.”
“I just tried to animate some objects using vanilla js but it was really laggy- switched to GSAP and now it’s smooth af”
“No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s.”
“GSAP should be the default when it comes to Javascript animations. It should literally be part of the next Javascript update.”
“This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.