[ScrollTrigger issue when you switch tab]

hello,

no you are right, in production (link above)  it's still version 3.3.1 

I tried again with the 3.3.4 and it seems to be fixed, thanks a lot!

[ScrollTrigger issue when you switch tab]

i'm using the version 3.3.1 of gsap and ScrollTrigger and downloaded the package 3.3.3, I just tried with the package 3.3.4 but i'm still having the same issues

[ScrollTrigger issue when you switch tab]

Hello, 

we've just release a website using ScrollTrigger and found out there was an issue when you use pin:true and switch tab,

you can replicate the issue here: https://www.museeatelier-audemarspiguet.com/en/about/tradition-forward-thinking.html

if you scroll down the page to reach the footer, switch tab, come back to the previous one, ScrollTrigger is repositioning the component in the middle of the page

 

I found a hack to fix the issue:

 

let style = ''
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    style = this.$refs.container.getAttribute('style')
  }
  if (document.visibilityState === 'visible') {
    this.$refs.container.setAttribute('style', style)
  }
})

 

if I listen to the tab change an set the style to it's previous state when coming back to the tab, it's solving my problem, but maybe there is a better way to do it

thanks in advance for the help

See the Pen tradition-forward-thinking.html by en (@en) on CodePen

[Multi-touch breaks Draggable]

53 minutes ago, GreenSock said:

I'm not terribly familiar with Hammer.js - we have no plans to duplicate all its functionality, but is there something in particular you want to request? 

I use Draggable and Throwprops on zoomed images in order to scroll them (closup of a product for instance). I'd like to be able to zoom in/out with multi touch devices.

[Multi-touch breaks Draggable]

Need HammerJS like functionnality in draggable too .

Is it planned along the new shinny GSAP v3?

[NPM premium plugins]

I don't have any experience in this kind of things but after searching a bit I found https://pgpkeygen.com/ (example with expiration date)

Under the hood it uses https://keybase.io/kbpgp or https://github.com/keybase/kbpgp

So I guess you could implement it on your server, keep the private key and allow the user to download the public key.

[NPM premium plugins]

Hi,

 

I would want to know if it is possible tu use premium plugins with the npm package (without having to download the package from my account).

If it is not possible do you plan to have like a key to unlock the premium plugins using the npm package ?

 

Thanks.

[Draggable start position]

Hi blue-infinity 

 

pls check this out : 

See the Pen Kzmxay by MAW (@MAW) on CodePen

 

Thanks for the answer ! I think I also have to listen for the image loading, because the code is not working the first time (I guess that the dimensions of the image is not detected properly).

[Force a tween to complete by killing it]

Are you saying you want the tween in its completed state before killing? I would think you could do

 

myAnimation.progress(1).kill();

 

I don't have the reference to the Tween object, but just the DOM object where the tween is applied.

 

See the Pen EKmoRz by lbineau (@lbineau) on CodePen

[Force a tween to complete by killing it]

Hello,

 

I would like to force the tween to complete (like TweenMax.killAll(true)) but for the killAllTweensOf or kill method, how is it possible ?

 

Thank you.

[Draggable start position]

Hello,

 

I would like to initialize the start draggable plugin, at a position of 50% Y of the drag path ? (could apply on a for example circle). Is there any easy way to do it ?

 

Thank you.

See the Pen remjXv by lbineau (@lbineau) on CodePen

[Stagger yoyo all elements but not the last one]

Hi,

 

I would like to yoyo all the elements but not the last one, that just should play normally and stay displayed without fading out.

Is there any easy way to do that ?

 

Thanks.

See the Pen oXXoQM by lbineau (@lbineau) on CodePen

[CrossFade of massive sequence of PNG]

Wow, such a quick support!

I really want to keep the crossfade between images because we remove a lot of frames from the original video so I can't use a spritesheet. It's also very hard to me to show you a use case due to a the amount of images (that's being said I love codepen.io).

Rodrigo found a part of the solution. Since I was on localhost I thought that image loading was instantly but in fact not for such amount + some canvas stuff.

So I try with a time out and it is OK now, there is still a small ghost effect but it is fine.

setTimeout(function () {
var tweenDuration = .2;
var staggerDelay = tweenDuration * 0.5;
TweenMax.staggerFromTo($('.video-transparent__img', view.root), tweenDuration, {css:{alpha:0}, ease:Linear.easeNone}, {css:{alpha:1}, repeat:1, yoyo:true, repeatDelay:.0, ease:Linear.easeNone}, staggerDelay);
}, 5000);

I will preload the images (with LoaderMaxJS maybe one day ?  )

 

Thanks a lot for your help everyone.

[CrossFade of massive sequence of PNG]

Hi,

 

I would like to animate a sequence PNG (300 images) with a really quick crossfade transition between image switch to emulate a movie effect.

I've tried multiple ways to achieve it (Timeline and Stagger).

There is always a blink between images. Is it a performance issue or am I missing something with my timings ?

TweenMax.staggerFromTo($('.video-transparent__img', view.root),.1, {css:{alpha:0}, ease:Linear.easeNone}, {css:{alpha:1}, repeat:1, yoyo:true, repeatDelay:.05, ease:Linear.easeNone}, .1);

Is it the right way to achieve it or is there another ?

 

Thanks.