Moderators

97

4,195

Moderators

84

3,221

42

142

34

13,069

## Popular Content

Showing content with the highest reputation since 07/09/2019 in all areas

1. 7 points

## Congratulations Jack — 10,000 topics

Wow! I just noticed the GSAP forum cracked 10,000 topics. I just wanted to take a moment to thank Jack for not only creating a fantastic set of animation tools, but also for fostering such a great community. I’ve said it before, and I’ll say it again — this forum really is an oasis in the snarky Interwebs desert. A friendly community with loads of great people and tons of info and demos. Truly one of a kind. A message for any lurkers — try jumping in and asking (or answering) a question. I think you’ll be glad you did. Congratulations Jack. Looking forward to GSAP 3.0 and the next 10,000 topics.
2. 7 points

## (beginner) How can i change the speed of a rotating object ?

Hi @Demky Welcome to the GSAP forums! The issue you're seeing is because all of your Tweens are trying to run at the same time (using TweenMax). From what I see you'd be best using a Timeline (Max or Lite): see docs here: https://greensock.com/docs/TimelineLite var tl = new TimelineMax({paused: true}); tl .to("#whiteCube", 2, {rotation:360}) .to("#whiteCube", 2, {rotation:1440}) .to("#whiteCube", 2, {rotation:1800}); \$('#whiteCube').on('click', function(){ tl.play(0); }); You'll want to note that the rotation values are all relative to 0 (not current rotation), so that's why I'm ending on 1080deg (1800 - 1440 = 360). Alternatively, you could set it to make the rotation add x degrees to the current value (by setting a var for current rotation and adding to that, etc).
3. 6 points

## (beginner) How can i change the speed of a rotating object ?

Using var isn't going to break the internet, but using let or const might. You don't want to be like this guy, now do you? Well, only on older browsers, but I get why they would teach you to use let or const. I use let/const on real projects, but I use var on these forums because a lot of people don't understand let/const yet.
4. 6 points

## Tweenmax smooth scrolling without Rubber-band effect

No, I think you're stuck with using the body/html for now. That also causes problems on mobile with the URL bar showing and hiding. That's why I'd really like for that smooth scrolling thread to die. It's just way too problematic, and coming up with acceptable workarounds would take too much of my time. One bit of good news is that Chrome/Android has a solution for selecting which element is the root scroller. https://www.chromestatus.com/features/5162094739587072 https://github.com/bokand/root-scroller/blob/master/explainer.md Please let Apple know that you'd like have that feature.
5. 6 points

6. 6 points

## Reveal countdown every time div is shown

Hello and welcome to the forums! There are a few things that I'd change about your approach if I were doing it. The first thing that sticks out is your repeating of the long list of .from() animations on keyup and keypress. I'd make a function that I then call it from those event listeners. The second thing is that it seems like you just want the animations to play when the form is submitted. The way you're attempting to do that is through listening to the button click and the keys in the form. Why not just listen to one event - the form submission - instead? Vanilla JS and jQuery have methods to listen for that. In your demo I had to move the submit button within the form to get the click to submit it without extra JS. Thirdly it seems that you aren't changing anything about the long list of .from() animations when you call it, so I'd create the full animation timeline before you call it at all. That way you don't have to rebuild it every time and worry about it overlapping each other. In order to get the countdown (countup?) to work using .to() you need to reset the variable to its initial state. You could do that by simply declaring the following inside of your animation function: Cont = { val: 0000000000 }; Otherwise you could use GSAP's fromTo method instead of the .to() like so: TweenLite.fromTo(Cont, 5, { val: 0 }, { val: NewVal, roundProps: "val", onUpdate: function() { document.getElementById("counter").innerHTML = Cont.val }, autoAlpha: 0, delay: 0.1 }); Altogether that would look something like this: https://codepen.io/GreenSock/pen/jjdXOg?editors=0010 Happy tweening!
7. 5 points

## (beginner) How can i change the speed of a rotating object ?

Hi @Demky, Please look at this page: https://greensock.com/docs/TimelineMax/reversed() .reversed( value:Boolean ) : Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards. myAnimation.reversed( true ); //sets the orientation to reversed myAnimation.reversed( !myAnimation.reversed() ); //toggles the orientation Happy tweening ... Mikel
8. 5 points

## Little help about Tweenmax pause and restart

You need to save a reference to your tween outside of a function. It's as simple as this: var myAnimation = TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); If you need it to to be created by a function, you must return the tween. function loopedTweenMax(){ return TweenMax.to(".daclass",0.2, {rotation:15, transformOrigin:"left 50%", repeat: -1, yoyo:true }); } var myAnimation = loopedTweenMax(); Now you can control "myAnimation" inside of other functions. Notice how I removed your onComplete. Just use repeat: -1 to repeat infinitely. https://codepen.io/osublake/pen/ZdgBYg
9. 5 points

## Animate only once

Hello Nexal and welcome. As SARFEX commented, this can be done using cookies or localstorage (I'd not recommend using IndexedDB for something this simple). I'd search for something like "js tell if user has visited page before" to find more information about how to do so. Basic approach: Check to see if a specific cookie or localstorage exists. If it does, don't animate. If it doesn't exist, animate whatever you want to animate and create the cookie/localstorage that you're looking for. Let us know if you run into any issues, especially related to the GSAP part of your code!
10. 5 points

## Attr Plugin Problem

Getting rid of transforms depends on your software. For most, you can usually ungroup and group your paths. https://stackoverflow.com/q/13329125/2760155 It's best to let GSAP handle anything transform related. I would forget about using the AttrPlugin for now. It has it uses, but usually not for moving stuff. So this will move it forward 50. logoAnimation.to('#Path_23', 4, { x: "+=50"}); Or back 50. logoAnimation.to('#Path_23', 4, { x: "-=50"});
11. 5 points

## Goldendust20

Hello @Goldendust20 and Welcome to the GreenSock Forum! I'm not seeing that "glitch" on Firefox and Chrome Windows 10. But if it was me I would convert your jQuery css() to the GSAP set() equivalent. So this way GSAP can keep track of what changes your doing outside itself: // So convert this jQuery css(): \$list.add(\$clonedList).css({ "width" : listWidth + "px" }); // To this using GSAP set(): TweenLite.set([\$list, \$clonedList],{ "width" : listWidth + "px" }); Notice how i added multiple CSS selectors within the square brackets [ ] for the target parameter of the set method? GSAP set() : https://greensock.com/docs/TweenLite/static.set() Happy Tweening!
12. 5 points

## Smooth Scroll again- Don't worry Blake it's not about yours.

I think this might be similar to your demo. And @ZachSaucier did something similar here. I don't think using a tween/timeline is the best approach for doing this. You need something a little more dynamic, like this: https://tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/ They are using linear interpolation (lerp) to do the smooth scrolling. It's just a really simple calculation. I just noticed that article mentions Jesper Landberg. https://codepen.io/ReGGae/ He is no stranger to these forums. I wonder if that is where he learned about lerp .
13. 5 points

## How to scale particles from center using html canvas

See the STARS acronym here. Your order is wrong, and you should use translate instead of drawing something at an xy coord. var originX = this.width / 2; var originY = this.height / 2; creative.ctx.save(); creative.ctx.translate(this.x + originX, this.y + originY); creative.ctx.scale(this.scaleX, this.scaleY); creative.ctx.translate(-originX, -originY); creative.ctx.fillStyle = this.fill; creative.ctx.fillRect(0, 0, this.width, this.height); creative.ctx.restore(); And more particle stuff.
14. 5 points

## (beginner) How can i change the speed of a rotating object ?

In addition to @elegantseagulls excellent advice, I'd add another approach to this type of animation is tweening the progress(). You create a tween or timeline with all your rotations and other properties that will animate in a paused state. Then tween the progress of that animation and add any in/out eases you like. In this case the actual timeline or tween with the animation should use a Linear.easeNone so it won't look odd. https://codepen.io/PointC/pen/gNyXEx Just my two cents and another idea for you. Hopefully it helps. Happy tweening.
15. 5 points

## Example of GSAP based "Timeline"

One recent post on here about something similar/related is this post: If you want it to trigger on scroll you could look at @PointC's new post on using GSAP with ScrollMagic (but it's not necessary to use ScrollMagic to do this - in fact GSAP may have its own way of doing it soon ). Maybe the guys who have been around the forums longer have other similar examples. If you threw together a demo of something you're wanting to create the guys here are often eager to help out
16. 5 points

## How is the job market for banner animation these days?

Hello! There's still some of us around, trying to make a living. From what I've seen, and as @leolo69 has alluded to is that production budgets for display banners has dramatically been cut. A few years ago I was at a DoubleClick event where we talked about budgets, and 85% went to media, and only 15% for creative and production, my current estimates puts that figure at 6%. This leaves a lot of work being out sourced to cheaper labour markets. (I may or may not have had a hand in this, I hear a lot of cheap production houses are using Bannertime to scale up. Oops) I've seen more traction with dynamic banners, or data-driven creatives, with programmatic being the buzz word for the media side for a while now, clients are more interested in the cost savings that can be had by developing a set of banners once, and re-using them for several seasons. That being said there's always those gem contracts where there is loads of budget and a real desire to get creative! They're few and far between these days but here's hoping the market will shift back to creative! EDIT: I also haven't done a decent interactive/rich-media creative in ages!
17. 5 points

18. 5 points

## BezierPlugin to animate anchors

Hi @JackyWang, Welcome to the GreenSock Forum. Interestingly case ... https://codepen.io/mikeK/pen/rEQRYL Happy tweening ... Mikel
19. 5 points

## Functions won't fire a second time

Hi @distrox, Welcome to the GreenSock Forum. .play(): Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is). So try .play (0) or .restart() https://codepen.io/mikeK/pen/jjQerz You could use this QuickTip also. Happy tweening ... Mikel
20. 4 points

## (beginner) How can i change the speed of a rotating object ?

PS Here's another option. https://codepen.io/PointC/pen/WqKyye Happy tweening.
21. 4 points

## Congratulations Jack — 10,000 topics

Thanks to all of the incredibly helpful moderators and other regulars to these forums! We literally could not do this amount of forum help without you, especially not with as much excellence and creativity as we see from you guys. Keep up the great work!
22. 4 points

## Congratulations Jack — 10,000 topics

Wow, thanks for pointing that out Craig! And we're at over 93,000 total posts, so another milestone is approaching. Pretty cool indeed! I'm super proud of the tone that all the moderators set here. It's truly a unique place on the web, so my hat's off to all the participants. And yes, to the lurkers - dive in, the water is nice and warm. PS: GSAP 3.0 is shaping up very nicely. When released, I'm sure these forums will be even more active
23. 4 points

## Screenshots to video

swampthang is probably the best person to ask about this type of stuff. https://greensock.com/forums/profile/17360-swampthang/ I believe he converts his animations to png, one frame at a time, and then uses ffmpeg to combine everything into a movie.
24. 4 points

## [SOLVED] Triggering wrong timelines with react state

Hi @Rodrigo, Do you need ScrollMagic for your list? Happy scrolling ... Mikel
25. 4 points

## (beginner) tween.play() clarification

Hi @haukeg, Sorry. My mistake. I answered too fast. Please try .invalidate () https://codepen.io/mikeK/pen/MMRRvN?editors=1010 Happy tweening ... Mikel
26. 4 points

27. 4 points

## How to Create Refs for React in SplitText

Hi, you can create the split text as a property in the component's class, in the constructor: constructor (props) { super(props); this.title = null; this.titleChars = null; } Here this.title should point to a ref in the render method Then in the component did mount method you can create the SplitText instance and assign the chars to the property created in the constructor: componentDidMount () { const mySplit = new SplitText(this.title, { type: "words, chars", position: "absolute" }); this.titleChars = mySplit.chars; // array of DOM elements (<div> tags) TweenMax.staggerTo(this.titleChars, 1, {x: 10, y:-10, rotation: 180, autoAlpha: 0}, 0.1); } That is working for me, give it a try and let us know how it works. Happy tweening!!
28. 4 points

29. 4 points

## (beginner) How can i change the speed of a rotating object ?

There are a lot of ways to switch the direction of the timeline on click. Usually you'll just do something like this in your click handler: tl.reversed() ? tl.play() : tl.reverse(); That will see which way the timeline is going and flip it. That being said, it also depends on whether you're allowing a click before the animation is finished. In those cases you can check it with the isActive() method. https://greensock.com/docs/TimelineMax/isActive() Because I'm a rebel and play by my own rules. Nah, just a habit. var works just fine for these little demos.
30. 4 points

## animation doesn't work proprerty on Ipad and Iphone

A few quick comments: Be careful about will-change. https://greensock.com/will-change The invalid morphSVG tween error means you forgot to load MorphSVGPlugin You can try setting CSSPlugin.defaultForce3D to true or false to see if one of those helps (default is "auto").
31. 4 points

## Background parallax effect on mouse move

Sure you can. But you need to be able to select it somehow. Why don't you try editing the demo to reproduce whatever you're imagining and then posting that demo here so that we can give you feedback?
32. 4 points

## reduceWhiteSpace : false not working

Hi @iloveaphextwin, Another option using a <span> (found here) https://codepen.io/mikeK/pen/NZJRQG Happy spacing ... Mikel
33. 4 points

## reduceWhiteSpace : false not working

My demo shows that the browser is collapsing your white space. The text inside the copy_2 div isn't being split apart by GSAP. If you want spaces, then use &nbsp; https://codepen.io/osublake/pen/OeqXaZ
34. 4 points

## Example of GSAP based "Timeline"

What kind of timeline are you trying to do? Like an interactive one, or one you just scroll through? I think GreenSock's Twitter is a good place for inspiration. https://twitter.com/greensock That's pretty easy to do with a standard timeline. Just replace time/duration values with pixel values, listen for scroll events, and BOOM! You now have MagicScroll ™. https://codepen.io/osublake/pen/bOGMaG
35. 4 points

## How to make blocks of different heights scroll at different speeds?

You wouldn't want to animate to different percentages. You'd want to animate each box to yPercent: -100. You'll also want to set the parent pinned element to overflow:hidden. https://codepen.io/PointC/pen/xoMJZx Just FYI — ScrollMagic is not a GreenSock product, but works well with GSAP. I wrote a post about that here: https://greensock.com/scrollmagic Happy tweening.
36. 3 points

## [SOLVED] Triggering wrong timelines with react state

I figured it out! By using the `eventCallback` I could toggle the home menu after the reverse was completed. If anyone is wondering exactly how I did this, here's a codesandbox: https://codesandbox.io/embed/gsap-fix-using-eventcallback-ir40h
37. 3 points

## (beginner) How can i change the speed of a rotating object ?

Yeah, all the info is in the docs, but you're right. Some things are not immediately obvious when you go to set up a real world project. The best advice I can give is to start with the learning section: https://greensock.com/learning After that you can learn a ton by reading through all the threads here on the forum. Maybe pick a section of the docs to read through each week too. Visiting CodePen and looking for GSAP based pens is always a great way to learn. Find something you like, fork it and then tear it down line by line until you understand what's happening. We're always here if you need any GSAP related assistance. Providing a concise demo (as you did already 👍) is the best way to get answers to your problems/questions. Happy tweening.
38. 3 points

## Attr Plugin Problem

PS I don't know anything about Adobe XD or how it exports assets, but I wrote a little bit about Adobe Illustrator exports here: Maybe it'll help. Happy tweening.
39. 3 points

## Animate only once

You can use cookies! 🍪🍪🍪 or localstorage // or IndexedDB maybe
40. 3 points

## Smooth Scroll again- Don't worry Blake it's not about yours.

We all know @OSUblake wants to optimize and blake-ify that snippet, but fears doing so will cause this thread to also get added to the list of threads causing him perpetual anguish. :--)
41. 3 points

## Smooth Scroll again- Don't worry Blake it's not about yours.

I don't have time to analyze things in-depth, but I did notice that you just nested the "autoKill" incorrectly: //BAD: .to(window, 1, {scrollTo:".footer", autoKill:false, ease: Power0.easeNone}) //GOOD: .to(window, 1, {scrollTo:{y:".footer", autoKill:false}, ease: Power0.easeNone}) It's fine to pass a string like that directly to scrollTo, but if you're defining more values that are scrollTo-specific (in this case "autoKill"), you need to use the object syntax. I suspect this is what was causing the dragging of the scrollbar to kill functionality (doing so killed the tween).
42. 3 points

## Fade in fade out with ScrollMagic

Is this what you need? https://codepen.io/PointC/pen/Wqmmod Just FYI — ScrollMagic is not a GreenSock product, but the article @ZachSaucier mentioned has a lot of demos showing how to use GSAP and ScrollMagic together. Happy tweening.
43. 3 points

## Example of GSAP based "Timeline"

Maybe this will help. It has drag, nav dot, arrow and mousewheel controls. No jQuery involved. https://codepen.io/PointC/pen/MzWzyv Happy tweening.
44. 3 points

## animation doesn't work proprerty on Ipad and Iphone

Hello @Nexal and Welcome to the GreenSock Forum! When you say: Do you mean the CSS animations that are on your page in the HTML panel. I see a style attribute with a ton of CSS animations. Its always best not to animate elements with GSAP if their children or parent elements have any CSS animations or CSS transitions on them. Otherwise you will have rendering issues due to the fighting of the two. Also what elements (id or class) are you referring to, you have a lot going on in that example? I am also seeing an error get thrown in the console. I notice terzafrase is an id selector not a class selector like you have in your code. invalid morphSVG tween value: .terzafrase
45. 3 points

## Example of GSAP based "Timeline"

At the moment I can't think of any recent demos or threads about that. Maybe look around codepen for stuff like "company history" or "animated calendars" etc... The things you find may not be built with GSAP, but maybe they'll give you some ideas. If you find something built with CSS keyframes we'll show you how to throw those out and animate it properly with GSAP. Happy tweening.
46. 3 points

## How to use GSAP PixiPlugin with Typescript and webpack

See if this works. import { PixiPlugin } from 'gsap/PixiPlugin'; declare var PixiPlugin: any; const plugins = [PixiPlugin]; PixiPlugin.registerPIXI(PIXI); I honestly don't why that would make a difference unless WebPack has changed, or maybe your config is a little different. Can you send me a simplified version of your project? I'm curious to see why it's being dropped.
47. 3 points

48. 3 points

## IE11, sliding text down (open sans), wobbly before stop

@Snoop .. I don't mind taking a crack at it in IE11. I was late to the party and you might as well have it work in IE11, since it's the highest version of Internet explorer on Windows 7. And as much as I hate and despise IE11, its not a dead horse until January 14, 2020. So lets give that IE11 horse, one last ride into the sunset and see that codepen demo. But that wobble your seeing right at the end of your text animation, sounds like the rendering layer being removed after its transitioned. You could be missing some CSS transform properties that IE11 requires to render CSS transforms correctly after transitioning, especially for web font text. Its an old horse so some times you need some hay. 🐴 You could make a limited codepen demo example so we can test it in IE11 to see if its a bug in IE11 or missing CSS properties to stop anti-aliasing mumbo jumbo. Happy Tweening!
49. 3 points