[Page has issues on IOS devices because of bottom toolbar]

@GreenSock thank you very much for the ideas and help!

[Page has issues on IOS devices because of bottom toolbar]

@GreenSock sorry for that, I understood now that I wanted to do literally the same. I've edited my message. Just on load, when bottom toolbar is visible, the window.innerHeight is smaller and initial scrollTriggers are calculated based on that smaller height, and I want to somehow calculate them as if toolbar is already hidden ( highest possible innerHeight on load)

[Page has issues on IOS devices because of bottom toolbar]

Hi Jack! It resolved the part of the problem, thank you... Can I detect on window load somehow, the window.innerHeight incluging the moving bottom toolbar? (it's visible on load)

[Page has issues on IOS devices because of bottom toolbar]

Hi, I did a page with scrolltrigger pinning and other effects, but on iphones it isn't working well because of bottom toolbar, that moves bottom 'scrolltrigger' and my '.pinSpacer' got repositioned... I tried ScrollTrigger.normalizeScroll() but it doesn't seem to work. We are looking for a person that can troubleshoot it

 

Thanks for your time

[ScrollTrigger.normalizeScroll() doesn't work on some ios devices]

Hello @GreenSock ! the page is just too big; I can't create a minimal demo. What I'm interested in is whether ScrollTrigger.normalizeScroll() should work 100% on all iOS devices with a bottom toolbar? If the bottom iOS toolbar breaks all triggered points, what alternative approach to animation can I try instead? ( Right now, due to the bottom toolbar, my pinSpacer's 'top' attribute is changing on scroll up and down, causing the fixed elements to be repositioned slightly. )

[ScrollTrigger.normalizeScroll() doesn't work on some ios devices]

Hi! ScrollTrigger.normalizeScroll() doesn't work on some ios devices, on some new iphones (iphone 12) it worked but caused 'jumpinness' when scrolling, on older ones (iPhone 7, XS) it broke my page, is there some rule of how to better apply it?

 

Thank you very much for your work!

[Animating <circle> 'r' (radius) attribute inside <svg> <clipPath> is lagging on ios devices]

@Cassie thank you very much, will-change:transform didn't work for <circle> element, I've rebuild animation with simple divs for iphone

[Animating <circle> 'r' (radius) attribute inside <svg> <clipPath> is lagging on ios devices]

@Rodrigo thank you so much! transformOrigin centers them when scaling, but when I use now scaling instead of changing radius, I have even more lags on mobiles, can I send you link to an actual website where this animation is used? maybe there are just too much circles and it's impossible to animate it ...

[Animating <circle> 'r' (radius) attribute inside <svg> <clipPath> is lagging on ios devices]

I have an animation of <circle> elements inside <clipPath>, I need to scale them, so that initial position stays the same (scale from center), I can only achieve it by changing 'r' attribute, but on IOS devices it looks laggy, on android and windows all works great. I thought I can fix it by changing the 'transform:scale()' attribute instead of 'r', and giving the circle 'will-change:transform', but when I change 'transform' instead of 'r', initial position 'cx' and 'cy' changes. Is there a way I can optimize animation of 'r' attribute on IOS devices? Would be thankful of any help...

 

See the Pen vYVEbje by kwastaras1337 (@kwastaras1337) on CodePen

[Laptop touchpad long swipe continue to scroll page after scrollTop: smoother.offset animation]

I did this transitions with gsap, but the problem is, that on a laptop trackpad (touchpad) or mobile swipe, if you do a "long swipe", scroll event can last up to 2-3 seconds, so page continue to scroll even after animation played. I've read that scroll event cannot be interrupted... Would be very grateful for some idea how to solve this... ( p.s i don't want to use library "fullpage js", because after this few slides a website needs to have normal smooth-scrolling behavior ) 

Quote

 

 

i found this similar thread and there seems to be no solution to this problem 🙁

See the Pen vYRqdwd by taras-grushowskij (@taras-grushowskij) on CodePen

[ScrollSmoother scrollTo() duration and easing]

21 hours ago, Cassie said:

I'd love to know which one you were after so I can bump the option a little higher or signpost it better. 

 

Thanks

thank you!

in make case this code worked

 gsap.to(window, {
   scrollTo: smoother.offset(section, "0 0"),
   duration: 0.3,
   ease: Power4.easeOut
 }),

 

[ScrollSmoother scrollTo() duration and easing]

Hello! I saw in docs there is only 3 options for ScollSmoother.scrollTo( target, smooth ( true or false ), and position). How can i specify the duration and easing of scrollTo() ?

[Hide ShockinglyGreen plugins from downloading in devtools]

Hi, can you give me some tips please how i can hide the plugins when setting website live, so all of the users can't download it?

What if a client for whom i do a website, will download those plugins and will use them later in his projects for free?