Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 01/02/2018 in all areas

  1. Hello @hanslibuzli .. Regarding the trailing pixels that you see, that @OSUblake advised about. I cant see what your code is like, but i have seen this in webkit based browser before. You could try setting -webkit-backface-visibility: hidden; to that element. That usually helps with that sort of evil. If it doesn't help you might want to create a reduced codepen demo example
    5 points
  2. Hi and welcome to the GreenSock forums. The way I normally attack this situation is using React's lifecycle methods, most specific the componentDidMount method. With that you know for sure that all the child have been rendered before making the animation. This is a sample that uses a code similar to that. Unfortunately I don't have any samples around with the specific behavior you need but hopefully you'll get the gist of it: Basically when creating each child (which in this case come as a hardcoded array, but getting the data via props shouldn't be much different) you give it a unique ref attribute to each which then you can use to loop and create the timeline or the stagger instance if you like (to create a stagger instance just reach to the array in the props and that should do it), then create the timeline and finally play it. I'll try to whip something during the afternoon that matches what you need. This is another sample but it uses a different approach, since it uses Transition Group since the elements are mounted and unmounted depending on the user interaction. It doesn't use a timeline or stagger, just a simple delay. This relies in the fact that the code is executed very fast (for larger apps you could consider server side rendering or perhaps another approach, once all the elements are rendered, perhaps pagination to render a small chunk of elements) and that the components are rendered in the sequence they exist in the app's data (again hardcoded in an array). But considering the fact that in a real app React will render all those child components at once so we can rely on that delay to create the stagger effect. Pay no attention to the code that's commented out, that's there in case someone needs to use CSS Transitions. The only catch is that the duration const used in the <Transition> component has to be the same that the one used in the GSAP instance, otherwise the component mount/unmount will be out of sync with the animation. https://codesandbox.io/s/7Lp1Q8WBA Hope this helps. Happy Tweening!!!
    4 points
  3. Hi @hanslibuzli GSAP uses a ticker, which is one continuous rAF loop that drives every animation. You can tap into it, which is nice for situations when you need to constantly update something, like a canvas animation. The ticker will power down when there are no active animations or listeners. https://greensock.com/docs/TweenLite/static.ticker You could actually use GSAP's ticker instead of calling requestAnimationFrame. It actually might be better because it will be synced with GSAP's update cycle, it just requires a little more code. var running = false; page.addEventListener("mousemove", function(event) { if (!running) { TweenLite.ticker.addEventListener("tick", onMove); running = true; } }); function onMove() { ... TweenLite.ticker.removeEventListener("tick", onMove); running = false; } About the artifacts in Safari... wow! Scaling can cause all sorts or weird rendering bugs. I'm not around a Safari browser at the moment, but have you tried setting will-change: transform in your CSS? @Jonathan is probably the best person to ask about what is going on. Perhaps he can chime in and offer some suggestions. He seems to always know some weird CSS hack to fix every rendering problem.
    3 points
  4. the way I understand it you need a repeating animation to happen for the entire duration of another animation and all animations need to be in the same timeline. I would suggest instead of putting the repeating animation in the timeline, just use tweenTo() to create a tween from the repeating animations start time to the end time of the other animations. Using PointC's great demo... var rain = new TimelineMax() rain.set("#stage", {xPercent:-50, yPercent:-50}); rain.set(".rain2", {y:-500}); rain.to(".rain1 , .rain2", 1.5, {y:"+=500", repeat:-1, ease:Linear.easeNone}); var box = new TimelineMax(); box.to("#box", 3, {x:600, ease:Linear.easeNone}); var main = new TimelineLite({id:"main"}); main.add(box); main.add(rain.tweenTo(box.duration()), 0) GSDevTools.create({animation:"main"}); DevTools now has a finite time and it controls one timeline which includes all the animations. Docs for TimelineMax.tweenTo()
    3 points
  5. Hello @multivac and welcome to the GreenSock Forum! Just to add my two cents.. if you were to use a timeline to repeat a background, then you should do it the GSAP way. This is done by creating a master timeline and adding child timelines via functions being returned with the add() method. And here is a helpful video by the Mighty @Carl explaining this technique in a video tut... Revolutionize your animation workflow: Part 1: Revolutionize your animation workflow: Part 2: Happy Tweening!
    2 points
  6. Hello @Tebbott and Welcome to the GreenSock Forum! This type of thing is really hard to debug in a video, as well as trying to debug with your live development site, even if private. If you can create a reduced limited codepen example with just the GSAP code that is causing you issues and the elements they affect. This will allow us to debug your code in a live editable environment that we can see our changes in action. This will allow everyone in the community to help you to solve your issue faster. Happy Tweening!
    2 points
  7. Hello dear friends, Kind regards Mikel
    2 points
  8. HAPPY NEW YEAR GREENSOCK COMMUNITY.. May GreenSock be more prosperous in 2018 (sorry for the all CAPS.. im really not shouting at you all)
    2 points
  9. Very nice, @mikel Happy New Year to you and the rest of the GreenSock community!
    2 points
  10. Mikel, Happy new year! Wish you and GreenSock community great 2018!
    2 points
  11. Oh my... I ended making a little tool to help because I have no idea how to make a sprite sheet in Illustrator. If anybody knows, please let me know. This outputs all the magical numbers I need to make it work in PixiJS.
    2 points
  12. Hi @ericshew I think the easiest approach would be to use the x/y attributes. Here's a fork of your pen with that possibility. That works well for circles(cx/cy) and rectangles, but you can also get the BBox of paths and loop through for those as well. We had a similar question here: Here's the demo I made as an answer to that question. Hopefully that all helps. Happy tweening.
    1 point
  13. @Rodrigo Thanks for the guidance, I managed to get it working. Here's the pen, just in case anyone needs it.
    1 point
  14. Unfortunately, you can't perform 3D animations on svg so it only supports rotation. Other things I noticed in demo, You need to use library files for any animation to work, in your pen you aren't including TweenMax. It can be done by clicking on settings > Javascript > there you can select files or search to include. You were using incorrect syntax this.Timeline.to(square, 4, { fill: "red", rotationY:180} ) Correct syntax is as follows, //TweenMax syntax TweenMax.to(element, 1, {}); //For timeline first you have to create instance and then add tweens to it var tl = TimelineMax(); tl.to(element, 1, {}); You can go through this getting started article for quick introduction https://greensock.com/get-started-js
    1 point
  15. BTW, there is only 1 box variable, and it's not copying the object. You can copy the value of a primitive (string, number, boolean, null, undefined, symbol). // Copies value var foo = "eggs"; var bar = foo; foo = "ham"; console.log(foo); // "ham" console.log(bar); // "eggs" For everything else, it's not that straightforward. Try searching for pass by value and by reference as it can be hard to explain. Variables do not store the value of an object, they just hold a reference to an object's location in memory, kind of like a home address. And just like your home address, it can be passed around and be used by more than 1 person. Notice how alpha and bravo appear to have the same value, but they are not equal. On the other hand, alpha and charlie are equal even though I changed the value of the msg property. That's because they are pointing to the same object. var alpha = { msg: "Hello World!" }; var bravo = { msg: "Hello World!" }; console.log(alpha === bravo); // false // Copies reference var charlie = alpha; charlie.msg = 123; console.log(alpha === charlie); // true console.log(alpha.msg); // 123 console.log(charlie.msg); // 123 And about there only being 1 box variable, that's because of something called hoisting. There is no difference between these two loops. All var declarations are moved to the top of their scope by the JavaScript compiler, so the first loop will end up looking just like the second loop. for (var i = 0; i < 2; i++) { var box = boxes[i]; } var box; for (var i = 0; i < 2; i++) { box = boxes[i]; } That's why this crazy looking code is totally valid. The num variable gets moved to the top. num = 8; num += 4; var num; console.log(num); // => 12
    1 point
  16. Hi @Annika Providing a simple demo is always the best way to get help, even if it doesn't work. You only have 1 object, demos, but you need 2 objects. The best way to go about what you're doing is to create an array of objects. You can add more animations later by adding another loop, but this should help you get started.
    1 point
  17. 1 point
  18. Tweens usually aren't ideal for user controlled animations, like with moving an object around in a simulation or game. Not saying you shouldn't use a tween, it's really hard to say without seeing what's going on, but a physics based animation might be easier to control. If you want to use a tween, @PointC suggestion of using the ThrowPropsPlugin might work well... And if you're interested, here's a good intro to physics book. I don't know if it will apply to what you're doing, but there is a chapter that goes over buoyancy. http://a.co/cVI6Qww
    1 point
  19. Hi @multivac If I understand your question correctly, you just want this repeating background animation and foreground animation to loop seamlessly using DevTools? If that's the case, I'd recommend making your repeating background animation a regular tween rather than an infinitely repeating timeline. You can then create the other foreground animation as a tween or timeline. So maybe something like this? I'm not 100% sure I understand your question/desired outcome so that may not be the exact solution you need, but hopefully it provides you with some ideas. Happy tweening.
    1 point
  20. That is really weird requirement, I doubt there will be anything built in for situation like this because callbacks are made for it. You can also retrieve '.totalDuration()' of foregroudTimeline and use a delayedCall to stop repeating timeline. var tl = new TimelineMax(); tl.add( backgroundTimeline, 0 ); tl.add( foregroundTimeline, 0 ); TweenMax.delayedCall(foregroundTimeline.totalTime(), function(){ backgroundTimeline.pause(); }); If you still don't want to use callbacks then you can do something like this, instead of "trimming" you can change the number of repeats on repeating timeline like this. Though after writing demo and this answer I feel like it is totally unnecessary which makes me curious what could be reason to not use callbacks.
    1 point
  21. 1 point
  22. Study this technique. An animation is created only once, not on every click. Instead, on a click you just change the reversed state of an animation. There's some logic in place so only the target element will play forward.
    1 point
  23. Frankly, this strikes me as more of a code structure/architecture issue. Let me clarify a few things: GSAP uses callbacks rather than event dispatching for 3 main reasons: Performance. Callbacks are much faster. Memory (runtime and file size footprint). Event dispatching requires storing extra data in arrays internally plus creating an event object every time an event occurs which, for an animation platform, could easily be 60 times per second for each and every tween that's running (which could be hundreds or thousands). Ouch. Callbacks typically make your code more concise. onComplete:myFunction vs. myTween.addEventListener("complete", myFunction); You brought up the idea of implementing an onChange callback (or event) but doing so would require extra code in almost every function (duration(), timeScale(), pause(), resume(), delay(), startTime(), kill(), etc.) and we'd no doubt get complaints like "why does onChange only get dispatched on non-playhead stuff...why not when I alter the progress or seek()...?" There'd be a relatively high file size and performance cost that I'm not very comfortable with, especially considering how few people would likely ever use it. What if you tween the timeScale() to gradually slow a tween/timeline down? That'd fire the onChange on every single render. Lastly, you said "I can't simply update my control whenever I add a tween because the tweens are added far away, in other objects, asynchronously" - if you don't mind, I'd like to respectfully challenge you on that. JavaScript by its very nature is not asynchronous. It is single-threaded and very much sequential in terms of execution (unless you're involving Web Workers which is almost never a great option in my experience). You've structured your code so that it's all feeding into a particular timeline and you're obviously associating it with the scrubber somehow, so it should be entirely possible to manage notifications/events however you please. For example, what if you created a single function through which all timeline additions flow, like: function add(tween) { timeline.add(tween); updateScrubber(); //or dispatchEvent("change"); } That way, GSAP remains super fast and lightweight, and you just wrap your functionality around it to get your event dispatching or communicate with whatever other modules you need in your own app. Basically, make it one layer of abstraction higher. The observer pattern makes a lot of sense in certain scenarios (like for browser/mouse events), but there are tradeoffs that make it a poor fit for things like an animation platform (at least in my opinion/experience). But even if it's not baked into the core platform itself, you can still wrap your own layer of abstraction around it to get exactly what you need. You should not need to "give up" on the idea of using Timeline as a model. Does that help?
    1 point
×
×
  • Create New...