Filip Winiarski

1 minute ago, mikel said:

Hey @hybreeder,

 

The resize function runs perfectly, no problem.

 

 

If you mean the scroll bar ?? Then

 

body{
  width:100%;
  overflow:hidden;
}

 

Happy tweening ...

Mikel

If he means the scrollbar, you just disabled scrolling for the page.

I believe, the answer should be to keep the scrolling, but hide the scroll indicator:

::-webkit-scrollbar {
    display: none;
}

8 minutes ago, ZachSaucier said:

Hey Filip,

 

Could you create a minimal example of your setup so we can see exactly what's going on? It would help us decide whether or not you can do what you're wanting in another way.

 Updated above

Hey,

I just have a question regarding behaviour of stagger methods callback onCompleteAll.

onCompleteAll does not fire whenever there are no DOM elements found by a tween - in other words, when there's no target DOM to tween (eg. ".nav-item" does not exist), onCompleteAll does not fire. I wish it would, since I have chain logic in my app. I also do not want to validate whether target elements exist every tween call. I simply resolve a promise on the callback and since stagger does not complete, promise does not resolve. How to deal with that?

Thanks

See the Pen ydqOZa by FilipWiniarski (@FilipWiniarski) on CodePen

16 hours ago, ZachSaucier said:

@Filip Winiarski Thanks for posting! You could post a minimal demo on CodePen to exemplify you're approach if you'd like. I think it'd be more helpful for future onlookers.

@ZachSaucier @GreenSock I have updated my comment with an example ?

Hey,

I've recently had to implement scroll with momentum/inertia. It's actually incredible simple:

1) animate scroll with basic linear tween with short duration (eg. .15 s) - let it be tween A
2) create second tween with easeOut ease and way longer duration (eg. 1 second)- let it be tween B
3) when user scrolls, use tween A - basic scroll movement
4) whenever user stops scrolling launch tween B - you can measure time from the last event and decide if user has stopped scrolling
5) whole magic is how to make smooth transition between both tweens - you can look for deltaY/deltaX values from the wheel event. For more advanced animations I would recommend looking for some physics library, to make all movements super natural.
6) interpret delta value to get the scrollTo x value in tween B

See the Pen OeXYKv by FilipWiniarski (@FilipWiniarski) on CodePen

7 minutes ago, Rodrigo said:

Hi,

 

I'm not very familiar with how the latest versions of Angular are bundled, so I'll guess that it uses webpack and perhaps you're bundling with a create app type-CLI. If that's the case, the culprit could be tree shaking. Please read this:

 

https://greensock.com/docs/NPMUsage

 

More specifically the tree shaking part (just scroll down a bit) and let us know how it goes.

 

Happy Tweening!!

That was the thing, thank you  I will update the post with the solution, thanks!

Hi,

I have been working on a scrollTo feature using ScrollToPlugin. It's working all fine on local environment, however after a production build in Angular (7.0.1 to be exact) tween throws famous scrollTo error:
 

Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.

This is how I import GSAP modules:
 

import { TweenMax, Power3 } from 'gsap'
import 'gsap/ScrollToPlugin'

console.log(com.greensock.plugins.ScrollToPlugin.version) // 1.9.1
console.log(com.greensock.TweenMax.version) // 2.0.2

And this is how I tween:
 

TweenMax.to(window, duration, { scrollTo: y, ease: Power3.easeInOut })

buildOptimizer for Angular is set to false. Import from 'gsap/all' neither works in a production build.

What am I missing?

SOLUTION:

Angular client is tree shaking so I had to reference ScrollToPlugin just after the import. Credits to @Rodrigo 
 

import { TweenMax, Power3, ScrollToPlugin } from 'gsap/all'

const plugins = [ ScrollToPlugin ]

Angular: 7.0.1
Gsap: 2.0.2

Hi, Does anyone have some idea how can I create a shuffling characters effect using GSAP ?
I want to create a stagger for all letters, randomly shuffling its character up to specific one.

Here are some examples:
https://airnauts.com/
http://festival.lattexplus.com/

+1

As far as I know GSAP applies fixed value (eg. 1000), even tho if you apply for example 100vh value, which should scale nicely. I believe it's done due to better performance, but having an option to animate keeping responsivity would be nice. There's always this moment at the end when I have to bind tweens on window resize to keep things responsive.

@GreenSock thanks for the tips! I forgot that loading time affects the performance of animations, therefore I minimized the video from 60MB to 5MB, added some sexy grid to cover this low quality and everything works sweet  For production I will also download the video on website preload so everything should work basically in an instant. Cheers!

NOTE: Moving any animations to canvas and SVGs seems to have lower impact on the video playback.

Hi, are there any methods to prevent GSAP animations stutter themselves and <video></video> playing in the background? Any animation I'll play on other elements, even the very basic ones, affect the video performance - resulting in a slideshow.

Video is 720p, 60MB. Video without other animations works perfect. And so animations without a video work perfect too. Any ideas?

I have done similar animation some time ago with images. It can be done very simply!

0) You want to render into a canvas
1) Write a method to split a video into different elements (create few video elements with the same video)
2) Position each video element so it creates one whole piece in canvas
3) Create an animation for each element so it actually moves and makes splits visible.

<li> elements are only for the texts, all the magic that happens within the video is rendered in the canvas.
Very nicely done by the authors, works so smoooothly ( ͡° ͜ʖ ͡ °)

PRO TIP:
In dev console go to Performance tab, click record, trigger animation, stop record.
This way you'll be able to see each frame of the animation to really see what's going on

30 minutes ago, GreenSock said:

Hm, I can't imagine how GSAP could possibly make that happen, but I'd be happy to take at a reduced test case. Have you tried reverting to an older version to verify that it indeed resolves the issue? I wonder if it's more likely about an update to your graphics card driver or perhaps a browser update that caused the problem(?) 

 

I just can't fathom how any of the changes in 2.0 could affect things in that way, and nobody else has reported anything similar. But of course if there's a problem in the codebase, I'd want to fix it ASAP. 

I have localized the issue. Stuttering was caused by animating super large fonts (the one in background). Still it is weird since I did not have the problem in 1.x. I have also upgraded to Angular 6 last week, which could also affect the rendering. Can't test with 1.x since it hasn't been working properly in Angular 6.

EDIT:
It's not even caused by the large font animation. Its own presence causes different animations to stutter T_T
I'm gonna switch to SVG or background image to walk around this issue.

Hi, I am working on my site and since gsap 2.0.0 I have experienced very weird stuttering bug. Check the video below to see what's going on. Animations were playing flawlessly in gsap 1.x.

There are no elements on the page that could cover those blinking areas. I am using simple TimelineMax and TweenMax calls, up to 4 at the same time. (opacity, color and x/y positions).

Video: https://streamable.com/sjxrk
Did someone have similar issue?

13 hours ago, GreenSock said:

Aha! I see what you mean now, and I think I figured it out. Angular was somehow loading GSAP before "document" was even defined, thus when it internally cached that as a variable, it was undefined. That explains why you were able to see "document" right before you did your tween, but it still wasn't defined inside GSAP. Kinda weird that Angular would do things in that order, but I think I've got a workaround in place in the upcoming release (due out VERY soon). In fact, we're also switching to ES modules in the default package that'd distributed via NPM, and that seemed to resolve things anyway. Please give these files a try: 

 

https://greensock.com/temp/GSAP-ES6.zip

 

Better? 

 

Notice there's a "umd" directory if you still need that older style, but I don't think you will. ES modules appear to work great in that environment. Please let me know if those updated files resolve the issue for you. 

 

ES6 Package works perfectly - anything can be called within a Tween like a charm! I still have issue referencing body element. It throws an error (see attachment) whenever I reference body tag - either by querySelectorAll or directly in a Tween call. Not sure if it's meant to work like this, I've never been referencing a body tag, but yeah, there's an error  

Also, from this quick try, transition does not work with ES6, but I guess you're on it 
 

TweenMax.to('body', 1, {background: 'red'});

2 hours ago, GreenSock said:

Thanks for reporting back. Yeah, that definitely sounds like an issue with the document.querySelectorAll() not being available...thus your selector text ain't selecting anything and GSAP is treating it like a literal string. Have you tried testing to see if document.querySelectorAll is available right before that tween? Like console.log(document.querySelectorAll)?  Sounds like Angular or your build system is doing something funky with that. 

As I mentioned in my update, calling document.querySelectorAll before a Tween and then passing it by works.

I have created new project:
 

ng new test

Then I have installed latest gsap:
 

sudo yarn add gsap

Then I have created simple Tween:
 

TweenMax.to('body', 0.5, {background: 'red'});

And this way we get an error which I have attached down below.
Also, here is my package, if that might be some case:
 

"dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "gsap": "^1.20.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.1",
    "@angular/cli": "~6.0.1",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }

Not sure if the best way is to wait for some Angular updates, or GSAP updates, or find a sneaky solution.
NOTE: Error goes and goes (looped).
 

UPDATE:

I have successfully managed to launch a Tween by referencing DOM with ViewChild type, as well as basic JS document.getEle... calls. So for now seems like we have to get element before calling Tween methods.

Same problem here,

Could it be because of other module?

@OSUblake Thank you, it works perfectly!

One little detail to close the topic:
 

const tl = new TimelineMax({paused: true});
tl.add(this.tween_test);
tl.play(); // launches perfectly

5 minutes ago, OSUblake said:

It's hard to tell what's going on from a snippet. Can you make a simple demo on stackblitz?

https://stackblitz.com/

 

Sorry, here it is: https://stackblitz.com/edit/angular-yhjnhz

I want span to animate on click, however nothing happens. What am I doing wrong?

Hi, I am trying to launch my timeline without any success. Tweens are being added correctly to the timeline, however .play() does nothing - no errors neither. If I use TweeMax straight away in openContact() animation will occur.

I am using Angular CLI 5.2.9 and gsap 1.20.4, here is the code:
 

import { TweenMax, TimelineMax, Power2 } from 'gsap';

...

tween_home = TweenMax.to('#home', this.animation_time, {
   ease: this.ease,
   display: 'none',
   opacity: 0,
   scale: 0.7
});

openContact(): void {
   const tl = new TimelineMax();
   tl.add(this.tween_home);
   console.log(tl);
   tl.play();
}

Any ideas what am I doing wrong, how to launch it?

UPDATE: This works:
 

openContact(): void {
   const tl = new TimelineMax();
   tl.add(TweenMax.to('#home', this.animation_time, {
    ease: this.ease,
    display: 'none',
    opacity: 0,
    scale: 0.7
   }));
   tl.play();
}