[Animating divs (with anchors) not reversing on iphone 12]

ok so just did some further testing on your demo. Thanks heaps for that.

And as far as i can see, it is def the change to the autoAlpha thats causing the issue. When the opacity is at 0.001, it has 100% success.  I'm finding with the autoAlpha version, the click itself doesn't register sometimes and that's why it wasn't reversing. The weird thing is, the toggle button flashes on the iphone/ipad as if it has been clicked. 

So strange why that property interferes - I think the solution for me will be to use the opacity setting to 0.001  so i can use gsap for the animation.

[Animating divs (with anchors) not reversing on iphone 12]

 

 

Here's a screen capture. First double tap it doesn't register. Second one  - it does.

[Animating divs (with anchors) not reversing on iphone 12]

Hmmm. Its a brand new ipad, so doubt it's a third party tool. 

Just tested Blake's one again and the issue is still there. It's weird. If your second click happens quickly after the first one (during the anchor stagger), the success rate of the reversal is like 50%. This is what happens when I try it a few times in a row. 

[Animating divs (with anchors) not reversing on iphone 12]

Ok so I recreated the stagger using pure css transitions and a simple toggle class to move the animation forward and backwards. This seems to solve the issue, in terms of reversing the animation during the stagger of the anchors. 

I would prefer to use GSAP though  rather than classes. I wonder if this helps to troubleshoot what could be causing the issue? Check codepen below~

 

See the Pen XWeqewL by Nysh (@Nysh) on CodePen

[Animating divs (with anchors) not reversing on iphone 12]

Hey Blake, 

 

Thanks for having a look. 

It works perfectly on chrome/safari on my laptop. However, I just tested the demo you posted on a safari browser on my ipad (9th Gen) IOS 15 and the toggle doesn't register if pressed during the anchor part of the stagger.

[Animating divs (with anchors) not reversing on iphone 12]

I just tried building the animation from the reversed state, and that also didn't work. I'm hoping the issue is a simple CSS related and not gsap. Been at this for a few days... ¯\_(ツ)_/¯

[Animating divs (with anchors) not reversing on iphone 12]

Hi Cassie, 

I don't think it has to do wit the size of the anchors or pointer-events interefering, as the issue still persists if you click far away from the anchor (with all pointer-events set to "none"). I just tested on an ipad 9th Gen IOS 15.1 and it still happens.

 

See the Pen eYGrRxZ by Nysh (@Nysh) on CodePen

What's weird is if you start in the 'reversed state' and then click during the anchor movement it seems to register. That could be a workaround I'll have to explore, but surely theres a simple explanation for why it doesn't register.

[Animating divs (with anchors) not reversing on iphone 12]

Hey fam, 

Getting some weird behaviour on iphone 12 Pro (IOS 14.3). 

If you click to reverse the animation (soon after first click), during the stagger of the divs that have anchors, the reverse does not seem to register.
However if you click to reverse during the regular divs stagger, it reverses fine, as expected.

On the computer in chrome, it works fine and reverses as expected during both staggers.

I've made a basic codepen to illustrate. Any help would be greatly appreciated to get this working!

 

See the Pen RwLMJYp by Nysh (@Nysh) on CodePen

[ScrollTrigger - fast scroll issue]

Hey fam thanks so much for all the replies.😍 This forum is truly awesome! 

I gave it another shot with a slightly different approach. I specified the end, and made the start and end triggers the same, for both timelines. 
I think this ensures there's no conflict between the first and second tween?
 

start: "top center",
end: "top center",

 

It seems to be working so far / fixed the issue of overlap. Here's an updated codepen

See the Pen mdmvVxy by Nysh (@Nysh) on CodePen

 

[ScrollTrigger - fast scroll issue]

Hey guys, 

I'm running into problems when i scroll down or up too quickly. It must be something quite simple, I'm missing. 
 

If you scroll down slow, then box 1 appears, and then as you go further down, box-2 appears. But if you scroll down quickly, past both triggers, box 1 doesn't disappear quick enough and all the boxes appear on top of each other. I'm using fromTo's and I've tried "immediate render: false" and "overwrite" but, have not been able to work out what is causing this issue.    Hope that all made sense.

I've made a minimal codepen demo to show what's going on. Any help is greatly appreciated.
Cheers  
 

See the Pen MWmzZdZ by Nysh (@Nysh) on CodePen

[ScrollTrigger.matchMedia for touch devices? eg. pointer: coarse or any-pointer: etc]

Hey guys, 

Couldn't find any info in the docs about using ScrollTrigger.matchMedia and pointers? I tried it with pointer:coarse and it didn't seem to register? Is this a feature / would it be in the future? Something like below. Thanks heaps  

 

ScrollTrigger.matchMedia({
"(pointer: coarse)": function() { // setup animations and ScrollTriggers for pointer: coarse?? },
});

[Cursor quick mouseenter/mouseleave issue]

Hey @ZachSaucier~

Thanks so much, that seems to fix the first issue perfectly. However, there is still the issue of the "double jump" when moving the cursor from one box to the other back and forth quickly. Not sure why that's happening? Does it have something to do with the ticker?

[Cursor quick mouseenter/mouseleave issue]

Hey @mikel,

 

Thanks for the tip  and quick response. I've made the speed value = 0.1 on mouseleave which makes it much smoother on mouseleave, and then I've used a timeout function (which feels a bit hacky) to return the speed variable back to 1.0. as this is the speed needed for the cursor normally. This works ok, but due to the timeout the cursor still jumps back into position. Is there a way to make the speed return to 1.0 smoothly after mouseleave , using gsap?

 

See the Pen JjbNLwP by Nysh (@Nysh) on CodePen

[Cursor quick mouseenter/mouseleave issue]

Hey guys, 

I'm having a couple of issues with animating a cursor. The aim is to have the cursor smoothly snap into position when entering a box and smoothly animate back to mouse position on leave (rather than jump to the new mouse position). Also, the cursor should smoothly animate when moving from one box to the other quickly.
 

1. How would I go about animating the cursor smoothly back to the mouse position after leaving the box (not sure how to store the mouse position while active = false.

2. When moving from one box to the other quickly, how would I prevent the cursor from jumping/flashing back, just before it locks into the new position.

Hope this makes sense. I feel like both issues are related to storing the mouse position while the fixCursor function is running? but still unsure how to make it animate smoothly. Any help is greatly appreciated.

Cheers

See the Pen MWbmQWK by Nysh (@Nysh) on CodePen

[How to update/store cursor position during drag event]

Yooo @Dipscom~

Thanks so much ~!!

I've updated the Codepen and it seems to be working exactly as intended! 
I'm not updating the mouse.x and mouse.y on dragEnd though? i've kept the active variable false the whole time, not sure if that is why?

Thanks again for taking the time to help us out. Much appreciated.

See the Pen jOMogZa by Nysh (@Nysh) on CodePen

 

[How to update/store cursor position during drag event]

Hey @Dipscom

Thanks so much for the prompt response. That makes sense about the values not being shared...sorry for the noob questions... how would I go about storing those values in the mouse object? I would love to make it work, but i am a bit out of my depth

[How to update/store cursor position during drag event]

Hey fam, 

As can be seen in the demo, when the drag completes, the cursor jumps back to its original position, before updating on mousemove. I'm wondering if there's a way to store or update it's position during the drag event (using quicksetter?), to avoid the awkard "jump" at the end. I'm using Flickity for the carousel, but the concept might be helpful/applicable for anyone using a GSAP custom cursor with a draggable slider.

Any guidance would be greatly appreciated  . Cheers  ~!
 

See the Pen eYdawgd by Nysh (@Nysh) on CodePen

[Expand image width on hover]

yooo~ that's so slick~ Thank you  @mikel!

That approach is so much better and cleaner. I applied it to my original width animation and now it works perfectly. Thanks again legend !!

here's the updated codepen~

See the Pen PoGLNWX by Nysh (@Nysh) on CodePen

[Expand image width on hover]

Hey guys, 

Im trying to make an 2 image gallery/accordion in which the the hovered image expands and and the non hovered reduces in width. I've created a minimal demo of my approach, but i'm getting a "jump" when the mouse goes from one image to the other. I'm assuming this is because of the "fromTo". Wasn't sure how to go about it, if i needed to clearProps?

 

Simple Criteria:
- When the user mouse leaves completely, both images should return to their initial width (50%).

- If the user moves from one image to the other, the widths should adjust smoothly.

 

Sorry if this has already been asked. Any help to smooth out the effect would be greatly appreciated. Thanks a bunch
Nish



 

See the Pen WNGmNgZ by Nysh (@Nysh) on CodePen

[Infinite loop based on scroll direction]

Hey guys, 

I'd like to achieve an infinite horizontal animation that changes direction (and speed) depending on whether the user scrolls up or down.

The animation currently changes with scroll, but eventually stops (see codepen). I know there are a few examples of infinite loops on the forum, however I wasn't able to combine them with a change in scroll direction. Any help on how to create an infinite loop with this example would be amazing

Cheers~

See the Pen LYRRydX by nish-mathur (@nish-mathur) on CodePen

[Text indent using Split Text]

Perfect! Thanks so much  @akapowl

[Text indent using Split Text]

Hey guys, 

Wondering if its possible to achieve a text-indent on the first line of text, while using Split Text. 
I've tried using " " within spans as someone had suggested before, but doesn't seem to work. Any help is greatly appreciated.

See the Pen ExyEMLW by Nysh (@Nysh) on CodePen

[resizing morphSVG on canvas after animation is complete]

Zach! Thanks so much mate. That worked

 

See the Pen qBZYPMM?editors=1010 by Nysh (@Nysh) on CodePen

[resizing morphSVG on canvas after animation is complete]

Hey guys, 

 

I've been following some threads / tutorials on rendering SVG on canvas.

My issue is quite simple. I'm trying to make a gooey menu entrance/exit animation using canvas. If I resize the window after the gooey menu is open, the menu suddenly disappears~ I've made a simple codepen to demonstrate.
If the animation is on repeat, and then resize it works fine, so I'm guessing the issue has to do with the my resize and/or animation function? Not sure why it's happening.

Any help is greatly appreciated. Thanks in advance

See the Pen bGpMwXP by Nysh (@Nysh) on CodePen

[ScrollTrigger scroll issue (toggle actions?)]

ahh no worries!

Hey thank you so much for all the info.  will def move to the new syntax. What's the ETA looking like for the upcoming release?