OSUblake

I don't know rxjs. I had to stop at level 7 because I don't understand how to do that. There needs to be some type of hinting, or a way to show the solution. So what is the solution? I also think having to search/replace strings isn't approachable for people trying to learn. That's going to require some googling for some people, and you don't want people to leave your app.

Nah. That's what Jack was trying to say. There is nothing is special about the different tween methods. They just add special properties to the vars object, like runBackwards and startAt.

Seems to work fine. https://codepen.io/osublake/pen/aba1fb11bdfa4d7852832d961ff5bc30

What is wrong with you show here? var tween = gsap.to(tweens[0].targets(), tweens[0].vars);

You should switch to v3 syntax. There is no need to import TweenLite, TweenMax, TimelineLite, or TimelineMax. https://greensock.com/docs/v3/Installation import { gsap } from "gsap"; interface Props {} const Item1Content: React.FC<Props> = ({}) => { let centerLabel = useRef(null); const timeLine = useRef<GSAPTimeline | null>(null); useEffect(() => { timeLine.current = gsap.timeline({ paused: true }); timeLine.current.to(centerLabel.current, { opacity: 0.1, duration: 0.5 }); }, []); return ( <> <CarouselItemWrapper backgroundImage={background} backgroundImageVerticalPosition={"bottom"} > <CenterLabel ref={centerLabel}>blupp blupp</CenterLabel> </CarouselItemWrapper> </> ); }; export default Item1Content; ? And notice the GSAPTimeline type.

Well, it probably won't affect a rectangle.

One problem with using that filter is that it can mess with antialiasing, so stuff can look pixelated. https://codepen.io/osublake/pen/91db7269c9fab4249fe1ae721efd02fa

Create some overlap. https://graphicdesign.stackexchange.com/a/41174/131165

This seems redundant. const currentBounds = { x: img.getBoundingClientRect().x, y: img.getBoundingClientRect().y, width: img.getBoundingClientRect().width, height: img.getBoundingClientRect().height }; Why not do this? const currentBounds = img.getBoundingClientRect(); Just be sure to use left, top for your calcs. https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Browser_compatibility

For v2. import { TweenLite, ScrollToPlugin } from "gsap/all"; const plugins = [ScrollToPlugin]; // if you need to animate CSS properties import { TweenLite, CSSPlugin, ScrollToPlugin } from "gsap/all"; const plugins = [CSSPlugin, ScrollToPlugin]; But I would recommend upgrading to v3.

You can get the ease map like this. var easeMap = gsap.parseEase(); But that will only give you registered eases. Someone could use an unregistered ease. It's just a function. gsap.to(".box", { x: 500, ease: p => p })

Did you try to use getItem(1) instead of [1]? const point = polyline.points.getItem(1); gsap.to(polyline, {duration: 1, morphSVG: dot_position.x + " " + dot_position.y + "," + point.x + " " + point.y});

Safari supports SVGPoint. It's not an array, so you should use the appropriate method for an SVGPointList. http://html5index.org/SVG - SVGPointList.html https://developer.apple.com/documentation/webkitjs/svgpointlist https://codepen.io/osublake/pen/064ffdb32643102f80643ae4d2e001fa

That's what I tried first, but maybe I spelled it wrong. ?‍♂️ Regardless, I think rotate should work. That's what I want to set.

How it should look. https://codepen.io/osublake/pen/d937822607be43d0e971869cce34c2f8

Can't seem to get rotation to work with quickSetter.

Well, that's probably more accurate, but it used to loop with the BezierPlugin. Maybe Jack forget to implement it, or it's undocumented. ?‍♂️ https://codepen.io/MAW/pen/bdOJmz

A similar thread. The demo shows how using delta time is pretty much the same as gsap. I'm not using an accurate duration for the gsap animation, so it's a little out sync. You can adjust the lag smoothing. If you use small values, then you'll see more frames, but it will run slower. https://greensock.com/docs/v3/GSAP/gsap.ticker

Is there a way to get the raw path to loop? I thought the BezierPlugin used to do this when the start and end points were close to each other.

Oh wow! That site sure is familiar. Spent like a year deconstructing all his work.

No. There's not a lot of libraries that can do that. You don't need d3 for the code you provided. consolidate is a native method. https://developer.mozilla.org/en-US/docs/Web/API/SVGTransformList

Yeah, that's a problem with finding answers on the forums. Most stuff posted before 2020 is going show the older syntax.

Make sure you register PixiPlugin, not PIXI. gsap.registerPlugin(PixiPlugin);

Hard to say without seeing your project. Can you make simple repo showing the problem? Also, you should be consistent with your imports and syntax. There is no need to use TweenLite/Max or TimelineLite/Max anymore. import * as PIXI from 'pixi.js'; import { gsap } from 'gsap' import { PixiPlugin } from 'gsap/PixiPlugin'; gsap.registerPlugin(PixiPlugin); PixiPlugin.registerPIXI(PIXI); gsap.from(ref.current, { duration: 1, pixi: { scale: 0.2, rotation:60 } }); Please follow the installation instructions. https://greensock.com/docs/v3/Installation And the migration guide.

Well that's strange as none of the tweens had staggers or keyframes in that demo.