Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Fakebook

BusinessGreen
  • Posts

    20
  • Joined

  • Last visited

About Fakebook

Fakebook's Achievements

Newbie

Newbie (1/14)

2

Reputation

  1. Thanks! Can confirm that the font-kerning: none; seems to do the trick. Edit: just wanted to mention it works when applied to the parent element (the element being split).
  2. I've noticed that text, when split, will sometimes have wider letter spacing. This seems to happen only when using the type: chars . This is especially noticeable when the split is applied right before or during an animation. Image example (Imgur). In my pen you can see a few differences. I was wondering if there's any way to reduce, or effectively eliminate, this issue. I tried a bit of CSS, but with no success.
  3. @Visual-Q This is definitely a great idea, but it appears that using stepped easing doesn't effect the onUpdate rate. I'm guessing it might be best to throttle inside my function as @elegantseagulls mentioned.
  4. I was curious if can set the rate that a specific tween fires onUpdate. Basically, I want to simulate a lower frame rate for a tween that is using onUpdate. I've seen that the TweenLite.ticker.fps(10) could work, but this seems to control the rate at all the tweens, and not just one specific tween. TweenMax.to("#lowFps", 3, { onUpdate: () => animate() }) In my Codepen example, I was hoping to have the top Tween smooth, and bottom one look like it's low fps. However, changing the ticker of course effects both.
  5. Wow, this article is amazing, wish I found it earlier. I used the method from this video, Revolutionize your animation workflow: Part 2, and used a function to create a new timeline for each event.
  6. Great, will definitely check this out - could you give me any reference for garbage collection/how to clear completed timelines?
  7. I'm curious what the best way is to tackle a project that has multiple (some time 5 to 10 at once) animations that use a complex set of tweens, but tween independent of each other. When the new elements are created/appended I originally tried to use TweenMax without a timeline on the new elements. This of course has its downfalls as it's difficult to create and if something changes, changing all the delays/timings can be a nightmare. I was thinking of creating a new timeline each event, but if a user uses the page for a while, there could be hundreds and even thousands of timelines created. In my example: If you click the button multiple times, I'm currently just adding to a timeline, where the events are waiting for the others to complete before they play. What do you think is the best way to handle a situation like this, while still taking advantage of the timeline? Should I create multiple timelines or something else? Will having a lot of different timelines be a big page performance hit over time?
  8. I think I know what you mean. Not sure how to do this off the top of my head but will look into it. Basically the script is loaded, but not executed?
  9. I'd like to see if there's a way to load GSAP through JavaScript and then create a timeline after it's loaded and ready. I tried to use fetch + then to achieve this, but I think there's something I'm doing wrong here. fetch('https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js') .then(function() { var tl = new TimelineMax({repeat: -1}); tl.to("#square", 1, {x: 300}) .to("#square", 1, {x: 0}) ; }); Th error I'm receiving: Uncaught (in promise) ReferenceError: TimelineMax is not defined I'm not sure if this is just a JavaScript error or an error with how GSAP needs to be loaded.
  10. I'm curious how I can create a delay that is not affected by the timeScale property. For instance, I'd like a variable that changes the overall speed of each animation, but not the amount of time that it pauses for. In my example, the timeSpeed constant could go from .5 to 3. Is there an easy way to tell timeScale to ignore delays? const timeSpeed = .5; const pauseTime = 1; const tl = new TimelineMax({repeat: -1}); tl.timeScale( timeSpeed ); tl.to("div", .5, {x: "+=100", y: "+=100"}) .to("div", .5, {x: "-=200", delay: pauseTime}) .to("div", .5, {x: "+=100", y: "-=100", delay: pauseTime}) .to("div", 0, {delay: pauseTime}) ;
  11. Great, this looks perfect @Sahil - out of curiosity... do to tweens perform better than from tweens?
  12. Ah, thanks @Sahil - I'm a fan of that bounce effect since it goes past the preset y value compared to the bounce easing. Is there any solutions to smoothinig that out, or would it be best to use a fromTo and some other tweens to simulate the effect?
  13. Thanks, @Sahil - not sure how I missed the display: inline-block property, but that seems to do the trick. When taking advantage of translate via x and y, I noticed a similar issue to what I posted in this thread. I went ahead and applied a similar fix which was recommended there. In this test, things don't look too different, but it's good to hear in more complicated animations there are definite advantages. force3D: false Also, I think creating in canvas is what I'm going to be looking at very soon. It seems that GSAP + PixiJS is the obvious choice for performant tweening. Are there any other recommendations on GSAP + canvas? Updated pen:
  14. I'm getting towards the end of a project, and started wondering about performance and improving the overall quality of the animations I'm making. In the example pen, I have a few questions. 1. Does using x, y improve the animations over using top, bottom, left, right? In a video by Paul Irish it looks like using translate for CSS animations is performs better, especially in more complicated examples, is this similar with GSAP? Looking at the GSAP tests, this seems different, though. I'm not sure if my eyes deceive me, but I do see a bit of a "staircase" effect on the letters. 2. How would you use x and y translates with staggerFrom + letters wrapped in spans? I'm not sure I understand using x and y properly - when I add to the spans of the letters in the example, it doesn't work. 3. Will lowering the ticker's call time help with performance? While Tweens may not be as smooth, will the browser use less resources if set to something like: TweenLite.ticker.fps(30);
  15. I'm having an issue with text shifting/resizing in Google Chrome. This seems to happen while the parent div is being animated. If you look at the Codepen example, you'll see the text snap to different sizes, and it also looks like it tries to change weights as well. The other thing I've noticed is that the parent container also shifts with the text. I've read other answers about this, but anything I've tried doesn't work. Does anyone have insight on this issue?
×