Chris7777

May 22, 2022

I just wanted to loop back with a little more info in case someone hits something similar.

On the latest MacOS + Safari Tech Preview the jank is less noticeable. Chrome, Safari and FF it's still apparent.

Some reading suggests it's related to MacOS' implementation of Promotion (adaptive refresh rate). I've tried setting the monitor to a fixed 60hz with not much luck. But some comments are suggesting that the browsers need to apply a fix, as its a software issue potentially related to browsers not using Promotion correctly.

Threejs has an issue that is almost the same as mine as far as description:

https://github.com/mrdoob/three.js/issues/21088

That user has the same occasional, but regular jump. There is a related Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1164435 (linked from the threejs issue)

I do feel its some combination of OS + refresh rate, and hopefully it naturally resolves itself in a couple of versions of the browser 🤷‍♂️

April 16, 2022

Thanks Jack. I figured it would be a tricky one but thought it wouldn't hurt to throw it out there just in case someone else had hit something similar in the past.

Cheers

April 16, 2022

I have a bit of a stutter problem. I would say its subtle but its noticeable.

See video (from 2s to 5s is probably most apparent). Obviously hard to capture on video esp. with YouTubes compression, but I think the horizontal stutter is clear

Testing devices:

It appears only on Mac devices from my testing so far.

I have tested two Macbooks: - a 2021 Macbook Pro M1 32GB and a 2016 Macbook Pro Intel 16GB.

It occurs on all browsers including Chrome, FF and Safari.

PC seems fine.

Tested on both an external monitor and laptop retina.

Someone suggested a vsync issue, but I see no obvious issues on https://www.vsynctester.com/ (warning that link is intense for anyone with sensitivity to color change/movement)

Profiling

Profile performance doesn't show anything too obvious, GPU is mostly idle.

https://drive.google.com/file/d/1JGSr6V88uxXO2a2HhVAMtPE4TCqrGRQ_/view?usp=sharing

Alternatives:

I have tried forcing the element on to its own composite layer and other various tricks available like "transform: translateZ(0)", "will-change: transform;", etc

Other frameworks:

Out of interest, I have also tested a few other frameworks:

- Phaser3 + physics movement (canvas): Does show similar stutter

- Phaser3 + non-physics movement (canvas): Does not show stutter

- Pixi (canvas): Does not show stutter

- Godot web export (canvas): Shows stutter unless I enable a fixed target FPS of 60fps

Obviously hard to really compare because they are canvas. However I found it interesting that Phaser sometimes showed it, making me think its some kind of delta step issue? Am I misusing the delta in my example above?

Summary:

Apologies about the wall of text, I just wanted to show I have tried exploring as many options as possible and have exhausted my ideas.

I think there is a fair chance this isn't a specific GSAP issue, but I have been knocking my head trying to narrow it down the root cause and hoping someone here may know, being you are much closer to the performance side of browser behavior.

See the Pen oNpQgeR?editors=0110 by chrisk7777 (@chrisk7777) on CodePen

April 3, 2021

Cheers Jack! No worries about the typo's, 90% of my ~~bgus~~ bugs are spelling mistakes...

Thanks for the extra approaches there, makes sense. I'll adjust my snippet to match up - always good to know of some alternatives.

My pleasure, easily the most "bang for buck" paid software that I use.

April 3, 2021

Thanks again @Visual-Q .

I had a play with that approach and got something going that works in my particular use case:

See the Pen xxgdRbM?editors=0010 by chrisk7777 (@chrisk7777) on CodePen

const DevTools = (() => {
  let instance = null;

  return {
    scrubber: (animation) => {
      if (instance) {
        instance.kill();
      }
      instance = GSDevTools.create({ animation });
    }
  };
})();

// Usage
const t = gsap.fromTo(".grey", { rotate: 0 }, { duration: 1, rotate: 360 });
DevTools.scrubber(t); // Or an id

April 3, 2021

Nice one Visual-Q. I'll have a poke around and get back with an update using that approach

April 2, 2021

Hi,

Two queries about the GSDevTools.

Query 1:

Easy one to start with. When using the CodePen linked on the GSDevTools page (with the 3x sliding boxes).

See the Pen MEYdxr?editors=0010 by GreenSock (@GreenSock) on CodePen

I experience two issues -

the dropdown doesn't show the currently selected tween and
when selecting "grey" it actually shows the orange tween.

Is this normal / expected? I'm probably just misunderstanding something...

See video attachment

Query 2:

What is best approach to using dynamically generated tweens with GSDevTools. I have boiled it down to a very basic case here:

`updateList` is undocumented, and I don't think I'm using it correctly. I tried recreating the GSDevTools after each button click, but that also errors out with _.dur is not defined.

Is there a preferred way to using GSDevTools with tweens that are built on the fly?

Thanks!

See the Pen rNjyvwp?editors=1010 by chrisk7777 (@chrisk7777) on CodePen

November 19, 2020

Thanks @ZachSaucier ! I just wanted to double check before going down the wrong track. Makes sense regarding performance, something I had not* considered.

Cheers!

Chris

November 19, 2020

Hi all,

This is a minor question, so no urgency. Is there a way with the GSDevTools to alter tween values without refreshing?

For example, in this demo GSAP CodePen if I wanted to see the impact of .grey completing at `x:300` instead of `x:700` I would need to alter the code, refresh, and (potentially) loose any other state such as the playhead position.

Context: I need to construct an animation with lots of small finicky deltas. About a dozen separate parts with lots of minor movements (almost like skeletal animation).

Alternatively, I'm thinking I could possibly rig up dat.gui (https://web.archive.org/web/20200227175632/http://workshop.chromeexperiments.com:80/examples/gui/#1--Basic-Usage) to expose particular variables and feed that back in to gsap but if there is a built in solution that would be much preferred and probably less fiddly that dat.gui.

Cheers!

See the Pen MEYxBZ by GreenSock (@GreenSock) on CodePen

January 19, 2020

Hi @GreenSock - I'm not the OP but this helped me track down an identical issue (production only issue with React). I'm going to jot down some notes in case others hit something similar.

My setup: React + TypeScript + Webpack4 using ts-loader with default settings. gsap 3.0.5

Like most things Webpack its really difficult knowing what is going on under the hood, even after reading the documentation (https://webpack.js.org/guides/tree-shaking/) I can't confidently say if Webpack4 does tree shaking or not.

By following the advice by Jack in my app's entry file, I was able to force CSSPlugin to remain available:

import { gsap } from 'gsap'
import { CSSPlugin } from 'gsap/CSSPlugin'


// Force CSSPlugin to not get dropped during build
gsap.registerPlugin(CSSPlugin)

This was done just once (in my entry file) and then all child modules/components were able to successfully use it without issue.

November 19, 2017

@axe-z - not sure if you mean my example when you say "the previous example". It's a shame they are you driving you nuts, I simply put them up to try to help other people correctly set up React with Greensock.

Regardless - I updated my codepen with a R16 version:

See the Pen MOrrEL?editors=0010 by cjke (@cjke) on CodePen

It should be noted I did nothing but update the cdn links - no code changed for it to work with R16. You might be talking about different examples, in which case, it might help to outline what isn't working?

Its worth noting you don't need react-transition-group to use greensock - in fact, I would say you should probably pick one library or another.

August 2, 2017

@Cristiano very nice example.

Just be mindful of doing anything in render. You are better off leveraging the lifecycle methods for components.

If you get a tic, check out my previous posts, and in particular this codepen

See the Pen qqWJzv?editors=0010 by cjke (@cjke) on CodePen

If you have a specific question, please ask, and I can do my best to answer.

February 16, 2017

I've yet to actually play with React Native, always leaning towards responsive sites instead.

Was there a particular problem you were hitting?

Btw - agree on the default transition / animation solutions for React. That's why I was so happy when I found it so simply to use React with Greensock - best of both worlds.

February 14, 2017

Double post - but just read your excellent article "will-change" as well the corresponding chrome bug tracker.

So disappointing - as you said, the agent sniffing thing, man, it feels like a huge step back.

For all the hate Flash got, god I miss it and its consistency

January 30, 2017

I definitely see blur when I don't round off my numbers - so for example, I will always do:

TweenLite.to(foo, 1, { x: Math.round(e.target.x) });

And yeah, this has been happening for a while.

It just seems with the most recent update, all the little work arounds and fixes no longer work, like:

    transform: translate3d(0, 0, 0) scale(1);
    font-smoothing: antialiased;
    backface-visibility: hidden;

It's also the first time I have seen the blur on the gsap site.

I have a feeling that Google really sees the web in a very specific way - believing that it should only be text and images for a good user experience. And they're probably right for the majority of sites, as you don't want every last site spinning, and shaking, and grooving - but they need to understand there are exceptions. Movie promotion sites, game sites, etc probably have the right to be a bit more flashy. I'm working in the elearning space, and sometime it makes sense to have things animate around to demonstrate an idea or concept.

Anyway, at least they aren't rewrapping entire sites in a cut down frame (cough AMP, cough AMP https://www.ampproject.org/)

January 29, 2017

@PointC funny you mention Firefox - booted it up for the first time for proper-dev in yonks as the inspector in Chrome was just too slow. Firefox feels surprisingly fresh and quick.

January 29, 2017

Yeah I totally knew it wouldn't be gsap-related.

Chrome's been a pain recently - I've been working through clients who are getting the "Not secure" marker on v56 (any page that has a login/password field but no https/ssl cert gets flagged). I understand the "why" but, it feels like its shoved down our throats sometimes.

I like the idea of a consistent message from users - I will report this to them.

January 29, 2017

Just a heads up, the latest Chrome (and only the latest, v56) is causing some issues with finished animations appearing blurry.

I've taken a screenshot of your CDN download modal, note the code section, everything appears to be a .5px off, causing a subtle but very obvious blur.

I've noticed this around the web (for example on the Stripe.com feedback page, they had a fancy animation that resulted in a similar blur), but just wanted to make you guys aware of it.

December 15, 2016

cjke would u say the docs are the best place to understand these "especially regarding the virtual dom and the importance of the key attribute and lifecycle methods. " or another resource, i found the docs explanation rather technical not that helpful

Yeah fair question, for lifecycle, I would say the official docs are really good: https://facebook.github.io/react/docs/react-component.html

For "key", the docs are less obvious, especially the deep down importance - I feel they explain that you must include it, but not really "why".

This part of the docs is also good: https://facebook.github.io/react/docs/reconciliation.html#keys (the whole page is interesting, but keys in particular).

Mark Erikson keeps an updated list of all the best tutorials related to React, there are a lot, but worth checking out some of the non-redux ones: https://github.com/markerikson/react-redux-links

Alternatively, feel free to ask here and I will do my best to answer (if I can!)

November 5, 2016

@greensock / Jack - na no pro, just work in that space a lot. I'm also happy its not difficult to combine two of my fav libraries!

Agree about the blogging - I have two project nearing launch - so possibly after those...

Yeah, interesting regarding the wrapper - I'm just not sure it's needed at this stage. Happy for anyone to offer where a wrapper might be needed, and then I could look at putting something together. In the meantime, I think tutorials/samples probably serve to be more useful then extra middleman code (again happy for some to alter my point of view on that one - as maybe I am missing some use cases).

I'm not on these forums often, but feel free to ping me (I've just switched on notifications) if there is a particular react/gsap combo question and I will do my best to answer (though again, not a pro )

Also, if people have any specific examples they want to see with react/gsap, let me know and I can try to put together some more examples (if not, I can try replicate some animations react-motion and velocity-react are doing, but give them the gsap magic instead).

November 4, 2016

Create React App always allows the option to eject (https://github.com/facebookincubator/create-react-app#converting-to-a-custom-setup) and then you can customise the webpack config as much as desired.

If you are hesitant to eject, you can simply modify public/index.html, this is used as the basis for the page. When you run npm start or npm build (for production) you will notice that the index.html (and any changes you make) are included in the builds (including adding refs to cdns)

November 3, 2016

I've been using greensock since the as3 days (and love it). Over the past year I've been using React full time.

I want to echo what Steven has said. The react questions that seem to be popping up when linked to animation and/or gsap often appear to stem from a lack of understanding about how React works - especially regarding the virtual dom and the importance of the key attribute and lifecycle methods.

Jack has asked for examples of gsap breaking react (in a few threads I believe) but no examples have really popped up. There is no doubt that the linked enhancer above can help smooth out things - but you definitely can work with gsap+react without it.

Simple things to remember:

Use ref instead of findDOMNode

| In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.

source: https://facebook.github.io/react/docs/react-dom.html#finddomnode

When using ref, prefer ref callback over the older (yet supported) string variation:

| If you are currently using this.refs.myRefName to access refs, we recommend using this pattern instead.

source: https://facebook.github.io/react/docs/refs-and-the-dom.html

Key is key

Key is super important with repeated elements because it's Reacts way of telling if its the same element or not. If an item in a loop has the same key on the next cycle, react won't attempt to unmount the old and mount a new, instead it will just update its props. This is really important for animations because you don't want the next cycle to remove an element that is currently animating.

ReactTransitionGroup

Also very important when items are being added or removed to the DOM. By wrapping your element in ReactTransitionGroup, you can delay when an element is actually unmounted - meaning you can hold off until an animation is finished before an element is removed from the vdom.

gsap is no different from all the other non-React-aware libraries out there. TinyMCE, Google Maps, etc can all work with React despite having very complex architecture. Before you scream - "but there is 'react-google-maps' and 'react-tinymce' on npm!" They are quite simple wrappers that, like above, utitilise the lifecycle methods and refs to tap into the dom while staying react.

Happy to throw some codepens together if needed.

*Edit*

Super simple example, can provide more:

See the Pen qqWJzv?editors=0010 by cjke (@cjke) on CodePen

Things to note is that the overall state is kept declarative (as per Reacts liking). The component is given props about its current state (is it animating, etc) and a child component communicates its internal state outwards via callbacks (again this is standard React - think like a normal input component, pass value={value} in and onChange callback).

During the timeline animation, the state is maintained (the counter - ironically this is set is via gsap, but the counter state count could be from clicks or anything).

July 17, 2012

The post doesn't clear up the difference between streaming and progressive. I guess I can just do a quick calc, and once the video has loaded more than 2 mins worth, I will skip to there and start playing

July 17, 2012

Hi.

I'm using the VideoLoader to load in a FLV movie. This part works fine, the movie loads and play's fine. I also would like to stream the video, this also works fine, but I can only stream from the start.

I would like to stream from, let's say 2 mins in.

I am doing the following:

vidLoader = new VideoLoader("/content/current/video.flv", {
       onComplete:onVideoLoad,
       onProgress:onVideoProgress,
   });
   vidLoader.load();    

   addChild(vidLoader.content);
   vidLoader.gotoVideoTime(120);    // 2 minutes into the vid
}

function onVideoProgress(e:LoaderEvent):void {
   loadingText.text = "Loading Video: " + int(e.target.progress * 100) + "%";
}

function onVideoLoad(e:LoaderEvent):void {
   trace("Loaded!");
}

The above streams the video, but only starts from the start. I can put the "gotoVideoTime" into the onComplete function, but it will only "goto" once the whole video has loaded.

Is there a way to start streaming from a certain point?

Cheers

October 6, 2011

Dude that is awesome! Cheers mate

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Chris7777