[SyntaxTextShadow Error: "" string literal contains an unescaped line break]

That's not valid JavaScript. You can use backticks for multi-line strings.

 

const shadow = `0 1px 0 hsl(43, 35%, 47%), 0 2px 0 hsl(43, 35%, 40%),
				0 3px 0 hsl(44, 35%, 35%), 0 4px 0 hsl(44, 35%, 30%),
				0 5px 0 hsl(44, 35%, 27%), 0 6px 0 hsl(43, 35%, 25%),
				0 7px 0 hsl(42, 35%, 23%), 0 8px 0 hsl(42, 35%, 21%),
				0 0 1px rgba(162, 138, 78, 0.05), 0 1px 3px rgba(162, 138, 78, 0.2),
				0 3px 4px rgba(162, 138, 78, 0.2), 0 5px 5px rgba(162, 138, 78, 0.2),
				0 10px 6px rgba(162, 138, 78, 0.2), 0 20px 7px rgba(162, 138, 78, 0.3)`;

 

 

[new converting coordinates feature and pixi??]

You should be able to do something similar to that using a combination of toLocal and toGlobal methods. It's been a while since I've done it, but I know it is possible.

[Animation from px to percentage]

Forgot to mention that if the page is scrolled, you may need to add the scroll position.

timeline.to("#content", {
        y: 0.2 * window.innerHeight - (bounds.top + window.scrollY),
        duration: 2
    });

 

[Animation from px to percentage]

y isn't an absolute coordinate. You would need to calculate from where it's sitting.

 

See the Pen f86b3f65f51ef2f625455fb7680d84db by osublake (@osublake) on CodePen

 

[Typescript can't find typings for import from 'gsap/all']

1 minute ago, JohnJesse said:

This is resolved if I import from `gsap` instead.

 

That's a problem with how typescript looks for definitions. When you use "gsap/all", it looks for a package named gsap/all, which of course doesn't exist. So you either have to import from "gsap" in at least 1 file, or tell the compiler where the definitions are in a tsconfig. See the FAQ.

https://greensock.com/docs/v3/Installation

 

{
  "compilerOptions": {
    ...
  },
  "files": [
    "node_modules/gsap/types/index.d.ts"
  ]
}

 

[Animating a number counter with React Hooks]

In the future, please provide a demo instead of posting code. 

 

Animating state.

 

See the Pen 7c49fd566c08b586659aae3987b5d59d by osublake (@osublake) on CodePen

 

Directly animating text inside an element. Should you do it this way? Depends. Animating state can be slow.

 

See the Pen fdadebde8f35d6d113683dfb94569a1a by osublake (@osublake) on CodePen

 

 

 

[GSAP reverse with React]

On 3/22/2020 at 2:52 PM, Aquasar said:

As a gsap newbie, do you know the difference between using gsap and TweenMax ? I see lots of tutorials using TweenMax and TimeLineMax and my thought it that the following imports both max versions?

 

TweenLite, TweenMax, TimelineLite, and TimelineMax is the old syntax. gsap is the new syntax, so use that instead.

[Simple React hover icon example]

3 hours ago, wolfduck said:

Hi @Rodrigo, is there a reason you create your timeline in state? Why not just declare it within useEffect with a const variable name?

 

How would you reverse it outside the function? With hooks, everything goes bye-bye on every render if you don't store it the "React way".

 

And you don't need to use state. A ref is fine, but it adds more noise to your code because you have to use .current. 

https://codesandbox.io/s/react-hover-forward-ref-pthnx

 

 

[Safari Stack Changes When Animation Starts]

I have no idea. 🤷‍♂️

[Moving multiple <g> to the same place]

1 hour ago, Aivars said:

Taking in consideration that groups mostly consist of path elements which doesn't support x and y attributes.

 

<g> elements support transforms.

 

1 hour ago, Aivars said:

By using simply gsap.to(objects, {y: number}) , I just get the elements to move y pixels down and not to the same y position.

 

You need to calculate the difference between the position of a <g> element and the point you want. Something like this.

 

var parts = document.querySelectorAll('#CarParts > g:not(#FordLogo)');
  
gsap.killTweensOf(parts);
    
gsap.to(parts, {
  y: (index, element) => {
    var box = element.getBBox();      
    return 300 - box.y - box.height;
  }
});

 

Also, you're creating a ton of <use> elements because you're calling the fordLogoClicked function for every part.

[Add easing to deltaY?]

9 minutes ago, ZachSaucier said:

But I'll leave it up to you and @OSUblake, if he's interested, to determine why that's the case since it's unrelated to GSAP.

 

Not really. I locked that thread because I don't feel like answering anymore scroll related questions. At least not for free. However, that code is free for anyone to use and modify.

 

All I can say is that the problem is most likely related to the fact that you are creating the scroller when the body height is different because of your intro animations. It should be created when the page is ready for scrolling, and everything is in place.

 

And if needed, I think you can force it to reset by doing something like this.

scroller.scrollItems = [];
scroller.addItems();
scroller._update();

 

[Problem with the onWheel animation]

Maybe try changing the fromTo animations to just to animations?

https://codesandbox.io/s/ecstatic-lehmann-znx1x

 

[GSAP 3 Stagger Classnames]

1 minute ago, anteksiler said:

Oh wow! This is super useful! I don't think this is on documentation.

 

There's a new documentation page for staggers. Check out the Repeat / Yoyo / Callbacks section.

https://greensock.com/docs/v3/Staggers

 

 

[GSAP 3 Stagger Classnames]

You can put callbacks inside the stagger object.

 

 

gsap.to(elements, {
  x: 100,
  repeat: -1,
  stagger: {
    each: 0.1,
    onComplete() {
      console.log(this.targets()[0]); // <= the current target
    }
  }
})

 

[Gsap and Angular 9: Unexpected token 'export']

6 minutes ago, Mazlum Tanrıkulu said:

I try to change the path of gsap to 

"node_modules/gsap/dist/gsap.min.js"

in angular.json and it is working I suppose

 

You're importing gsap twice. Either use the import syntax in every file that uses gsap, or add the script to your angular.json file, but not both.

 

When using the import syntax, you only need to import gsap though. There is no need to import TweenLite/Max, TimelineLite/Max, or any of the eases.

import { gsap } from "gsap";

https://greensock.com/docs/v3/Installation

 

Eases can be done with strings.

gsap.to(element, { duration: 2.5, ease: "bounce.out", y: -500 });

https://greensock.com/docs/v3/Eases

 

And you most certainly don't need jQuery.

import { gsap } from "gsap";

gsap.fromTo(".mobile-screen", {
  marginLeft: "20vw"
}, {
  duration: 0.3,
  marginLeft: "100vw"
});

 

👆 animating margins is slow. It would be much better to animate x.  And with angular, you really should be using refs instead selector strings.

https://www.techiediaries.com/angular-elementref/

 

[Which Canvas Library i should be using for GSAP text animation?]

11 minutes ago, Usama Khalid said:

I thought GSAP Splittext thing works on Canvas as well using Three.js aur PixiJS, but found out that it works only for DOM.

 

SplitText is kind of pointless for canvas. Just use text metrics to get the position of a letter.

https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics

 

 

[Locomotive Scroll and GSAP]

2 hours ago, andystent said:

You'll see in the Pen that when each block comes into view it has a class added "is-inview". It would be great if I could just have an animation play as soon as that class is added, and then reverse when that class is removed.

 

You should probably read through their docs. It says there are events, which you should be able to use to control gsap animations.

https://github.com/locomotivemtl/locomotive-scroll

 

 

[The great toilet paper hoarding of 2020]

Good dogs.

 

[Which Canvas Library i should be using for GSAP text animation?]

1 minute ago, Shrug ¯\_(ツ)_/¯ said:

I was assuming the OP was talking about creating an actual video file. So thats why I was wondering what the process was given resolution etc., come into play.

 

Yeah, a video is basically the same process I did above for the animated gif. Can't really make a video in a codepen-like environment. The resolution is whatever size you make the images/frames. 

[Which Canvas Library i should be using for GSAP text animation?]

7 minutes ago, Shrug ¯\_(ツ)_/¯ said:

Curious, whats the process to video?

 

Canvas is an image... or you can convert an svg to an image. Create image for every frame, kind of like here.

http://plnkr.co/edit/oZjPbgo9hvqwUYEV7RLi?p=preview&preview

 

There are libraries that can already do that though.

[Which Canvas Library i should be using for GSAP text animation?]

1 minute ago, PointC said:

Anyway, I thought I was about to read a detailed analysis and review of every possible canvas library plus a bunch of cool demos. All I got was one sentence. 

 

Hehe. Well, the question was about converting a canvas animation to video, so I don't think it should really matter as long as it looks like what you want.

 

I mean, you can definitely make cooler effects with WebGL (PixiJs and Three.js), but they don't really do native text. It's drawn on a regular canvas first. And the animation descriptions in the OP seemed pretty basic, fade, typewriter effect, etc, which shouldn't be hard to do with a normal canvas library like fabric.

 

 

[Which Canvas Library i should be using for GSAP text animation?]

Use whatever is the easiest for you, and fits your needs.

 

[Draggable endX differences GSAP 2/3]

2 hours ago, Shrug ¯\_(ツ)_/¯ said:

@PointC comes out of hiatus and makes a few posts, each pen is picked as Codepens of the day. 😜

 

He has a fan that works at CodePen. They hand pick what shows up on the front page.

[clipPath problem]

JavaScript isn't CSS. With string interpolation, you need to make sure that the only differences are numbers. Everything else should match, so you need to have vw next to your 0.

TweenMax.to(BackgroundToAnimate[0], time, {clipPath:"polygon(100vw 0, 100vw 0, 100vw 100vh, 0vw 100vh)"});

 

See the Pen 7d49525ced44c61796e0ea0b016bc300 by osublake (@osublake) on CodePen

 

 

[Having tweens compensate for CPU lag?]

If you need an animation to be synced to the audio, then it might work out better if you manually set the progress of an animation to the progress of the audio.

 

With a paused animation, something like this on every tick/update.

myAnimation.progress(audioProgress);