.jpg.fb1a40cf0511df95e33926a34c464b14.jpg)
OSUblake
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by OSUblake
-
I don't think that CSSPlugin documentation hasn't been completely updated for v3. This won't work anymore. CSSPlugin.defaultSmoothOrigin = false; It seems to work fine here with an array and NodeList. https://codepen.io/osublake/pen/eb7d255fc4cd5192ba43326111b64847 What origin problems are you having? Are you sure that you want smoothOrigin to be false? That will make it jump. Can you make a demo showing some of these problems?
-
.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
Make sure you have everything setup correctly... client side code separate from server side code. https://reactjs.net/bundling/webpack.html Or use gsap in a script tag, like from cdnjs. @model IEnumerable<ReactDemo.Models.CommentModel> @{ Layout = null; } <html> <head> <title>Hello React</title> </head> <body> @Html.React("CommentBox", new { initialData = Model, url = Url.Action("Comments"), submitUrl = Url.Action("AddComment"), pollInterval = 2000, }) <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js"></script> <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js"></script> <script src="@Url.Content("~/js/tutorial.jsx")"></script> @Html.ReactInitJavaScript() </body> </html> -
Not sure, but it looks like v3 has less decimal precision, which might be making it more noticeable. Def something @GreenSock might wanna look at.
-
What kind of object are you trying to tween? Defaults gets applied to every tween, kind of like if you were using Object.assign. var defaults = { smoothOrigin: false }; var obj = { x: 100 }; gsap.to(obj, Object.assign(defaults, { x: 200 })); // => Invalid property smoothOrigin smoothOrigin should only be valid on DOM elements.
-
It helps with support as that is the syntax used by install helper here. https://greensock.com/docs/v3/Installation?checked=core,draggable,inertia#modules People seem to get confused by gsap/all. The only difference is that when using gsap/all with TypeScript, the compiler might have trouble finding the definitions because it will search for a package with the name gsap/all. If that happens, you have just have to manually tell it where the definitions are in your tsconfig. { "compilerOptions": { ... }, "files": [ "node_modules/gsap/types/index.d.ts" ] } ... or do import { gsap } from "gsap" at least 1 time in your app. Just a weird little quirk.
-
Although, I don't know how well that will work for SVG elements because the transform origin might be kind of difficult to copy. Maybe Jack has some suggestions. I know there is a secret object on elements, but I don't want to get into that if I don't have to.
-
How do you restore the gsTransform data? I see you are saving it in that demo, but I don't see where/how you are using it. For simple usage, you could save transforms like this using getProperty(). https://greensock.com/docs/v3/GSAP/gsap.getProperty() var props = gsap.getProperty("#someElement"); timelineData.push({ ... gsTrans: { x: props("x"), y: props("y"), rotation: props("rotation"), ... } }) And then just set what you've recorded. gsap.set("#someElement", timelineData[i].gsTrans);
-
I think they are looking for some type of if/else logic in the click event, but I'm not sure what the end goal is either. ?♂️
-
That's why we recommend using brackets. That way you won't import the wrong object, and the correct objects will show up in auto-complete. import { gsap, Sine} from 'gsap' import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin' gsap.registerPlugin(MorphSVGPlugin); const lineAnimate = useRef(null); const lineRef = useRef(null); useEffect(() => { gsap.to(lineAnimate.current, 1.2, { morphSVG : lineRef.current, repeat: -1, yoyo: true, ease: Sine.easeInOut, delay: 0, }); }); Or use string format for eases. import { gsap } from 'gsap' import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin' gsap.registerPlugin(MorphSVGPlugin); const lineAnimate = useRef(null); const lineRef = useRef(null); useEffect(() => { gsap.to(lineAnimate.current, 1.2, { morphSVG : lineRef.current, repeat: -1, yoyo: true, ease: "sine.inOut", delay: 0, }); });
-
Ain't gonna happen using this syntax. TweenMax and Sine are the gsap object. Please read the install page and watch this video. https://greensock.com/docs/v3/Installation
-
That's not a property. It's the minified name of a an object. If you use an unminfied version of gsap, it will say the name. And that's just one of many reasons why you can't convert a timeline object to JSON, and then back again. Object references are going to get screwed up. Good one! I forgot about making that, but I think that is pretty much the best way to reconstruct a timeline from JSON data. And getting that to work with v3 wouldn't be too much work. The biggest changes are that there aren't Lite/Max versions of Tween and Timeline and there are no staggerFrom/To tweens anymore. For staggers, you now set a stagger property.
-
Oh, I see. He didn't technically overwrite them. If the previous animation lasted longer than the new animation, it might look a little funky like here. Notice how the box goes left, then right, and then left at the very end. That is because both tweens are running at the same time. https://codepen.io/osublake/pen/0fe81acc740a083c2ddd79564e193d03 You can fix that by setting overwrite to "auto" or true. https://codepen.io/osublake/pen/68b5c9b50e61179474629f74f680c605 Or kill the first animation. https://codepen.io/osublake/pen/e02f232f003a8e2fc26b27a31003bd2f The same technique would work for timelines. Tweens and timelines are interchangeable for the most part.
-
No. Everytime animateToState is called, it creates a new timeline with new tweens, so there is no chain of animations being queued. So does his demo do what you are looking for?
-
A little. So what triggers the split view animation on desktop, a button, or is it just based on a media query change?
-
Hi @biljohns I've read every single post you've made, and I'm still confused by what you are even trying to do. Can you explain what is your end goal. Are you trying to do something like in this demo? Click on the "more" and "home" links. https://codepen.io/osublake/pen/ZbPxjN That's from this thread... But again, I'm still unsure about what you are trying to do. If you could point to a demo or video of something related, that might be helpful.
-
Even though you didn't tell it to, your setup was actually loading from gsap/dist/gsap. Whenever you see something related to cjs (CommonJS), that means you should use the dist files.
-
And I have a feeling that you may need to do something like mentioned here with server side rendering. That process.client property might unique to nuxt/vue. However, there might something similar to the framework you are using.
-
Lots of stuff won't be supported server side. You need to make sure the JS runs client side, but I'm not sure how to do that with the framework you're using. It's probably best to ask the people who make it, like how to run JS when the window object is available.
-
Something def seems wrong. cc @GreenSock v2 https://codepen.io/osublake/pen/5ed42e012c21c2ae1bb9f19149b76f59 v3 https://codepen.io/osublake/pen/e545d150f63825bd622ab4654f78598f
-
Another side note. You don't need to do that anymore. npm install ./gsap-bonus.tgz Check out this video at around 3:00 https://greensock.com/docs/v3/Installation
-
With hooks, a lot of logic that should work, doesn't. You shouldn't use normal variables as they won't be the same on the next render. Just one of the reasons I find hooks to be very difficult to work with when it comes to animations. // BAD let fadeOutTween; ... fadeOutTween = gsap.to(...) // GOOD let fadeOutTween = useRef(); ... fadeOutTween.current = gsap.to(...);
-
That might be helpful! And just a little FYI. The progress being passed into the render method of a plugin is the ratio. render(progress, data) { data.target.style[blurProperty] = data.interp(progress); } https://codepen.io/GreenSock/pen/NWKjEBG
- 9 replies
-
- 4
-
-
- easing
- progress()
- (and 2 more)
-
Totally. That's why I said this...
-
Nice one @mikel!!! I wasn't aware of writing mode. <text writing-mode="tb">SVG</text> That's a good solution, but I think something might be a little off with how GSAP is handling transforms on text.
-
There might be a problem with how GSAP is calculating the position of SVG text. @GreenSock might want to check and confirm that it is working as intended. I'll just say that SVG is a pretty complicated beast. For example, here's a post I made about how positioning works in SVG, and how <g> elements are treated differently by the browser. https://greensock.com/forums/topic/13681-svg-gotchas/page/2/?tab=comments#comment-72060 Perhaps GSAP is doing the wrong type of calculation on text. I haven't tested, so it's just a theory. I do know that getting the bounds of svg text can be kind of quirky in some browsers. I'll wait for Jack to confirm.
