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 en en en en de en en en en en fa en en en en en en fi hbs_lat en en en en en en en en en de es en en en en en oc fr oc oc ca fr fr fr oc fr de en en en en en en en de de en en en en en en de nl en en en en en de en en nb en en en en en en en en en en en en en en sv en en nb en en en en en en en en en en en en en en en en en en nb en en en en en en en en en en en sv en en en en en en en en en en en en fr en de en en en en en de ru nb en de ru en en en en en en en en en en en en fr en en en en en en en en en en en en de ms en en en en en sv en en en en en en en nb en en en en en en en en en de en en en en en en en en en nb en en en en en en en en en fa ceb nb en fa ceb en en en en en en en fr en en en en en en en fr en en en en en sv en ru nb en en ru fr en en en en en en nl en en en en en en de en oc fr oc oc ca fr fr fr oc fr de en en en en en en en en hu en hu en it en en en es en en en en en en 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
How to animate tween while other tween animation is applied
PointC replied to Roman Kovalev's topic in GSAP
PointC replied to phantomboogie's topic in GSAP
Draggable onPress change target actions
PointC replied to cleveradvertising's topic in GSAP
PointC replied to d0minium's topic in GSAP
PointC replied to LazyRectangle's topic in GSAP
Hi d0minium Welcome to the GreenSock forums. Your intro animation doesn't finish because your intro and scene1 timelines are both targeting the .eye class. The intro animation starts playing immediately, but as soon as you scroll to the scene1 trigger, you start the scene1 timeline which then takes control of the .eye element and starts animating it. You're basically starting a fight for control with two timelines trying to animate the same element. Hopefully that makes sense. Happy tweening.
How to pause timeline in between animation
PointC replied to Jeff Pang's topic in GSAP
Hi Jeff Pang Welcome to the GreenSock forums. Your pause() isn't working because you're not playing the tl timeline. When you use the tweenFromTo() method, you're creating a new tween that scrubs the timeline. You have a couple options to get the correct behavior. Since you're playing the timeline from start to finish anyway, the easiest would be to change line 13 in your pen to simply play() the tl timeline: //switch this: tl.tweenFromTo("start","end"); //to this: tl.play(); If you want to use the tweenFromTo() method so you can play from label to label, you'll need to create a reference to the new tween so you can control it. In your start button function you can create a reference to the new tween like this: yourReference = tl.tweenFromTo("start","end"); Then change your pause button function to this: yourReference.pause(); Here's a fork of your pen with the second option: http://codepen.io/PointC/pen/738a5b1a5ab18f00238350de686ff925/ More reading about the tweenFromTo() method. http://greensock.com/docs/#/HTML5/Sequencing/TimelineMax/tweenFromTo/ Hopefully that helps and makes sense. Happy tweening.
Kill tweens on resize and reset starting position
PointC replied to Caroline_Portugal's topic in GSAP
Happy to help. That's how we roll in the GreenSock neighborhood.
Kill tweens on resize and reset starting position
PointC replied to Caroline_Portugal's topic in GSAP
Hi Caroline_Portugal If I understand your question correctly, it looks like you don't need to recreate the animation on a resize event. It seems you want it to play or not depending on the screen size. If that's the case, you don't need to kill() the animation, but rather play() or pause() it depending on the screen size. You can put all your screen size logic into a function and call it when the page loads and call it again when the screen is resized. Here's a fork of your pen with that solution. http://codepen.io/PointC/pen/RGmdVx/ Hopefully that helps a bit. Happy tweening.
PointC replied to carleaql's topic in GSAP
Hi carleaql Something you could try would be to add easing to each part of your morph. Since you have a linear ease on your pen, it seems to stop and start into the next move rather abruptly. By adding a simple in/out ease to each step you can have a little more organic looking animation. You can play with various Powers until you find one that you like. It's not perfect, but might work for you. Here's a fork of Carl's pen. I just duplicated the SVG and timeline so you could see a side by side comparison of the difference. http://codepen.io/PointC/pen/wzkEzr/ Hopefully that helps a bit. Happy tweening.
Draggable with snap and scroll animations
PointC replied to cleveradvertising's topic in GSAP
This looks like a duplicate post so I'll lock this one. Carl provided an answer here: http://greensock.com/forums/topic/15331-draggable-with-snap-swipe-scroll-section/
Draw SVG creating different sections on a path
PointC replied to pauljohnknight's topic in GSAP
Hi pauljohnknight Looks like you're targeting the entire svg instead of the path. You can correct that by making the following change: //switch this var mySVG = $('#svgTwo'); // to this var mySVG = $('#svgTwo path'); Everything should work correctly with that change. Happy tweening.
Transformations on hidden elements get ignored
PointC replied to qarlo's topic in GSAP
Yep - the x was being ignored. That's the point I was making in Post #3 above, but I didn't specifically describe what the problem was. Sorry about that. Happy tweening.
Wish you had more tutorials, Gsap seems great, but there is alot that is not covered.
PointC replied to axe-z's topic in GSAP
Hi axe-z Welcome to the GreenSock forums. If you like to learn be reviewing code, I'd suggest taking a look at the GreenSock Collections on CodePen. http://codepen.io/GreenSock/collections/popular/ As far as more advanced demos, there are a lot of talented people to follow on CodePen. Please take a look at some of the best: Blake Bowen http://codepen.io/osublake/ Sir Jonathan Marzullo http://codepen.io/jonathan/ Chris Gannon http://codepen.io/chrisgannon/ Sarah Drasner http://codepen.io/sdras/ Diaco http://codepen.io/MAW/ Hopefully that helps a bit. Happy tweening and welcome aboard.
Transformations on hidden elements get ignored
PointC replied to qarlo's topic in GSAP
Hi qarlo Please try a little change in your tween: //switch this .set('.one', {css: {visibility: 'hidden'}, x: 100}) //to this .set('.one', {visibility: 'hidden', x: 100}) Making that change should give you the desired outcome. Please keep in mind that you can't animate visibility. It's either hidden or visible. As Jonathan suggested, please use autoAlpha or opacity. Happy tweening
PointC replied to GeorgeC20's topic in GSAP
well... bummer I thought maybe that would help. I'm not much of an expert with the SplitText plugin so please stand by. Someone should be along shortly with some more information. Happy tweening.
PointC replied to senna's topic in GSAP
Hi senna The problems you're experiencing mainly come from the CSS. I set your parent container to a height of 100vh so the other divs know what 100% height means. The slides should use absolute positioning rather than a float. Then position them at left: 0,25%, 50%, and 75% of their parent container so they're ready to scroll into view. Here's a fork of your pen that looks like it's working properly to me: http://codepen.io/PointC/pen/JROqEA/ Just my 2 cents worth here, but I'm not sure ScrollMagic is the best choice for this animation. It can certainly work, but you should take a look at a couple of Diaco's demos to see other approaches that offer more flexibility: http://codepen.io/MAW/pen/XmozON http://codepen.io/MAW/pen/yYradO Hopefully that helps a bit. Happy tweening.
PointC replied to GeorgeC20's topic in GSAP
Hi george_43841 Welcome to the GreenSock forums. Your question reminded me of another thread about using emoticons with SplitText. Perhaps it could be of some help: http://greensock.com/forums/topic/13427-emoticons-in-splittext/ Happy tweening and thanks for being a Club GreenSock member.
How do I know the coordinates?
PointC replied to Es-her's topic in GSAP
Ha! "Kim Jong Dipscom" is awesome! As the Old Klingon Proverb goes: "Revenge is a dish best served cold."
FEATURE REQUEST: Variable width stroke animation
PointC replied to swampthang's topic in GSAP
I made a CodePen once where that feature would have been nice, but in the real world I'd tend to agree and say this would be something only a few would use on a regular basis. Just my 2 cents worth though.
Hover animation - fast 'rollIn' causes ani to get stuck
PointC replied to redrooster's topic in GSAP
Hi redrooster Since you will have several of these, I'd recommend jQuery each() to create a timeline for each element which can be played on hover. You mentioned not needing the animation to reverse on mouseout so I used a mouseenter instead of a hover. I also added an isActive() check when the mouse enters the div so the animation won't start over with rapid hovers in/out. Finally, I added a data div to indicate the index of the element you just hovered over. Here's a fork of your pen with my solution: http://codepen.io/PointC/pen/ALbpPb/ Hopefully that helps a bit. Happy tweening.
Animating SVG line strokes with DrawSVG plugin
PointC replied to bomortensen's topic in GSAP
Hi bomortensen Welcome to the GreenSock forums. The easiest way to animate a dashed line with the drawSVG plugin is by using a mask. I wrote about that technique in our ongoing 'SVG Gotchas' thread here: http://greensock.com/forums/topic/13681-svg-gotchas/?p=57942 Hopefully that helps a little bit. Welcome aboard and thanks for being a Club GreenSock member. Happy tweening.
Trigger tweens with ScrollMagic
PointC replied to senna's topic in GSAP
Hi senna You're just missing one file. Please add this to your pen: https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js That should get you working correctly. More info on that plugin can be found here: http://scrollmagic.io/docs/animation.GSAP.html Happy tweening.
DrawSVG - Circle stroke starting point
PointC replied to a topic in GSAP
Hi Nickzilla SVG circles always start at the 3 o'clock position so you'll need to rotate it by -90 degrees. You could do that by transforming the circle like this:   or rotate the entire SVG like this: TweenMax.set("svg", {rotation:-90}); Hopefully that helps a bit. Happy tweening.
Page 165 of 192
“This is by far the fastest and most active community I've ever seen for getting personalized answers to questions. Only with the help of GSAP and this forum was I able to accomplish my project.”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“It's so correct that GSAP's logo is a superhero. Every time I use GSAP it saves me heaps of time and frustration. Thank god for GSAP honestly.”
“I was astonished by the speed and versatility of animating with GSAP.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
“GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes.”
“GSAP was a revelation for me to be compared with the introduction of jQuery.”
“If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with.”
“I am more and more amazed every day, and very glad that I decided to get a business license.”
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.