[Issues with split text character masking]

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 - 

 

Here is the page in question - https://hotbuttered.websitestaging.live/rainbows/wing-pin/

 

Any help here is much appreciated.

 

Kind regards,

Chris

See the Pen bGEqbaQ by GreenSock (@GreenSock) on CodePen

[I would like to use GSAP to animate borders on scroll trigger]

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.

[GSAP image animation trigger error]

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

[scroll trigger animation and image as parallax combined(not image as background)]

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

[scroll trigger animation and image as parallax combined(not image as background)]

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

 

[scroll trigger animation and image as parallax combined(not image as background)]

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

[scroll trigger animation and image as parallax combined(not image as background)]

18 minutes ago, mikel said:

Hey @crmichael,

 

What do you mean by 'animation on scroll trigger is not as required' ?
You need a trigger to start the animation.

 

 

 

 

Happy scrolling ...

Mikel

 

'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 

[scroll trigger animation and image as parallax combined(not image as background)]

10 hours ago, GreenSock said:

I assume you were looking for something like this?:

 

 

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/
 

[scroll trigger animation and image as parallax combined(not image as background)]

i checked above video but thats not all requirement.

i have created codepen demo with scroll animation as - 

See the Pen dyWBMea by shravan-softechure (@shravan-softechure) on CodePen

Requirement:-
same animation effect and image parallax move inside container on scroll as  bottom 3 images  on reference : 
https://cuttings.websitestaging.live/about-us/

 

[scroll trigger animation and image as parallax combined(not image as background)]

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.