crmichael

Hi All, I am trying to implement a split text character mask for some of the titles on a website i am developing. I have managed to mostly acheive this however when the titles are in the initial viewport the mask isn't present. I am unsure if the line height or some other things are conflicting. Here is codepen for reference - https://codepen.io/GreenSock/pen/bGEqbaQ Here is the page in question - https://hotbuttered.websitestaging.live/rainbows/wing-pin/ Any help here is much appreciated. Kind regards, Chris

I want to replicate this border animation here - https://dft.websitestaging.live/get-started/ using GSAP with scroll triggered, so the borders animate when scrolled into viewport. I have both horizontal and vertical borders to animate.

Hello, We have applied some GSAP animation for some images on this page - https://imsu.com.au/products/morning-mist/. There seems to be an issue sometimes with the animation not triggering correctly on scroll, resulting in on about 5-10% of the image been shown. Please see attached screenshot for reference. I should note that this error doesn't occur every time. Any help correcting this small glitch here is much appreciated. Kind regards, Chris

Hello, Thanks for your reply. I do agree there is a lot going on, which makes sense as to why mobile was struggling. However I have removed the 3 big animation modules from this page on mobile and there is still an issue. As you can see on this page there isn't much going on now, but still the animation is glitching. Can you please shed some light? https://imsu.websitestaging.live/products/morning-mist-4/ Appreciate your help. Cheers, Chris

Hello, Just an update here we were successfull in finding a solution to the above however the gsap animations seem glitchy and have a lag when viewed on mobile. Please see this link here https://imsu.websitestaging.live/producttier1/morning-mist-3/. Both the split text and image animation appears strange. We have tried to troubleshoot with deactivating plugins and removing other elements on the page but still no luck. Do we need to add some other code rules for mobile? Kind regards Chris

The codepen solution you have provided above only has a solution for the parallax effect on the image. The issue we are facing is that we would like to have the "swipe" intro animation of the image as well as the parallax effect triggered on scroll in the same module. As sent above the 3 images at the bottom of this page is the perfect example of what we are trying to achieve. https://cuttings.websitestaging.live/about-us/ Any help here is much appreciated. Kind regards, Chris

'animation on scroll trigger is not as required' means animation is not as needed(trigger is fine).. and in your last pen parallax not there its just animation trigger. i need both triggered animation(swipe image) with parallax effect(on normal scroll) on image

parallax effect is perfect but animation on scroll trigger is not as required.. exact requirement is same as on bottom 3 image of below link:- https://cuttings.websitestaging.live/about-us/

i checked above video but thats not all requirement. i have created codepen demo with scroll animation as - https://codepen.io/shravan-softechure/pen/dyWBMea Requirement:- same animation effect and image parallax move inside container on scroll as bottom 3 images on reference : https://cuttings.websitestaging.live/about-us/

i want an animation as an attachment section on below so on scroll first it animate blocks when comes in viewport and than image act as parallax.. i need both in same function and same as reference. reference url - https://cuttings.websitestaging.live/about-us/ reference section on above url needed as attachment here. Help would be appreciated with codepen demo. thank you.