[ScrollTrigger Pause Timeline on "onEnterBack"]

43 minutes ago, Cassie said:

Hi there @Joshua Harmon

It may be that you're just killing the timeline and not the scrollTrigger - If you use a more current version of GSAP tl.kill() will also kill the associated scrollTrigger.

You have a lot of absolutely positioned elements though so if you kill the scrollTrigger you're also going to lose the ability to 'scroll' through the content.

You might have to kill the scrollTrigger and then set some styles so your page is actually navigable.

Updated GSAP version - killing the timeline and scrollTrigger

 

 

 

 

This may also be of help.

Good luck!

Actually that's where I got stuck I can no longer scroll to section 2.

[ScrollTrigger Pause Timeline on "onEnterBack"]

Hi,

 

I'm trying to permanently pause a timeline on "onEnterBack" in ScrollTrigger but I can't seem to get it work.

 

I tried Timeline.kill() but it left a "pin-spacer" div with a huge height.

 

What am I doing wrong here?

 

CodePen

See the Pen vYeWWBQ by joshuah46 (@joshuah46) on CodePen

[ScrollTrigger Safari Mobile Height Issue]

Hi,

 

I have a ScrollTrigger animation which works flawlessly except on browsers like Safari mobile where the browser height changes because of expanding UI elements.

 

I did some Googling couldn't really find anything that I haven't already tried.

 

My problem is when the URL bar shrinks I get a very visible white bar on the bottom of the screen.

 

Screen recording on iPad:

https://www.loom.com/share/b99c3ae0b6b0449aae06385559dcfab3

 

Codepen:

See the Pen vYeWWBQ by joshuah46 (@joshuah46) on CodePen

[DrawSVG laggy performance for a simple animation in Safari]

11 minutes ago, GreenSock said:

<filter id="glow" x="-100%" y="-100%" width="350%" height="350%" color-interpolation-filters="sRGB">
  <feGaussianBlur stdDeviation="5" result="coloredBlur" />
    <feOffset dx="0" dy="20" result="offsetblur"></feOffset>
<feFlood id="glowAlpha" flood-color="#000" flood-opacity="0.123"></feFlood>
<feComposite in2="offsetblur" operator="in"></feComposite>
<feMerge>
  <feMergeNode />
  <feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>

And elsewhere in your markup:

<g id="uiGroup" filter="url(#glow)" style="transform: translateY(28px);">

Notice that filter="url(#glow)"

 

 

Huh, interesting I never really looked into the SVG. It's a fork of this.

 

 

I didn't know SVGs had special markup for effects. I commented out the Fe stuff it works fine now on my MacBook and iPad Pro

 

I apologize for the mistake this is on me.

 

[DrawSVG laggy performance for a simple animation in Safari]

 

Quote

Filters are often TERRIBLE for performance. Like...really bad. I don't think your issue has anything to do with GSAP - it's the filters you're using. I see a gaussian blur in your markup, an invert() filter in your CSS, and some other things I'm not terribly familiar with in markup like feMergeNode, feComposite, feFlood, color-interpolation-filters, etc. 

There's only one filter in the whole animation and it's invert() it just changes the color from black to white for the stick man figure PNG.

 

You can remove it. It makes no difference.

 

I don't know where you're seeing gaussian blur

[DrawSVG laggy performance for a simple animation in Safari]

Hi,

 

I have a SVG which is animated via DrawSVG Plugin.

 

It's a very simple animation with just 3 elements, it seems to be working fine in all browsers except Safari.

 

I tested it on a i7 Retina MacBook Pro and iPad Pro 2018

 

Both of the devices were playing the animation in 10-15 FPS.

 

I have attached the codepen and screen recording in the attachments.

 

Is there anything that can be done about this?

 

Thanks.

 

 

See the Pen vYeyKPP by joshuah46 (@joshuah46) on CodePen

[Can't lock section with ScrollTrigger]

Hey,

 

Interesting, I didn't think of a timeline initially because both the animations where inside the same section. (I'm very new to GSAP).

 

Anyways, thanks for taking the time to reply really appreciate it.

 

36 minutes ago, Cassie said:

Hey Joshua!

 

You can trigger an animation in an onComplete - but you can't really add a scrollTriggered animation in an onComplete. It's a bit at odds with each other.

 

You're saying 'Hey GSAP - start this animation when this one ends - but also start it when the scroll starts and tie it directly to the scroll progress'

 

You need to choose one approach. I would go with one scrollTriggered timeline. 

 

 

 

 

[Can't lock section with ScrollTrigger]

Hi,

 

So I have a quite simple animation where an iPhone mockup comes up from the bottom of the screen and gets pinned after that an image sequence  animation is supposed to play.

 

But my I can't seem to figure out why the iPhone won't stay pinned and play the image sequence animation.

 

I tried changing the iPhone scroll trigger to .main-container but that only made it worse.

 

Any guide or help is appreciated.

 

Thanks.

 

 

Codepen url: (Please open in new tab)

 

https://codepen.io/joshuah46/full/vYeKdoV

See the Pen vYeKdoV by joshuah46 (@joshuah46) on CodePen

[Can't seem to get rotation working]

13 minutes ago, Cassie said:

oh ok!

 

Then you're looking for 'to' not 'from' - nice and easy! ✨
 

.to(man, {
  rotation: 43,
})

 

That worked, I'll keep that mind. Thanks a lot!

[Can't seem to get rotation working]

Hi there, thanks for replying what I meant is at the end of the animation the position of the stick man figure is the original position I would like it to rotate from that position.

 

The stick man figure in the video goes from fallen position to standing position. It should be the opposite.

 

[Can't seem to get rotation working]

Hi, I'm new to GSAP and almost got my animation working except the rotating element in the timeline.

 

I'm trying to rotate an element but it doesn't seem to rotating correctly it rotates in negative and returns to the original position.

 

I have tried OriginTransform but it didn't work.

 

How do I rotate it from the original position?

 

  .from(man,  0.5, {
    rotation: 43,
  }, 1.8, '-=0.5')

 

I have recorded a short video of the animation

https://www.loom.com/share/23f6791cd6334d80856a4ae976eb7f8f