Hi, I am looking for a solution that combines the two different text animations like on the websites below, I am also using fullpage js.
https://wirewerks.com/en/about-us/
https://21-capital.com/
So on each index of the page I am using if function for the animation, although without reverting the splittext it creates a duplicate each time i scroll to the specified animation page as it runs it again and again, that is why i had to revert it.
Sorry for not being able to replicate the code work on codepen.
var mainTitles = new SplitText('.strength-title h1, .free-session-title h1', {
type: "lines",
linesClass: "line line++"
});
$('.strength-title h1 .line , .free-session-title h1 .line, .photobio-title h1 .line').wrap('<div class="line-wrapper">');
TweenMax.staggerFrom(
mainTitles.lines,
2, {
yPercent: 100,
ease: Power4.easeOut,
delay: 1
},
0.25,
splitRevert
);
$('.strength-title h1, .free-session-title h1').css('visibility', 'visible');
var tp = gsap.timeline(),
mySplitText = new SplitText(".photobio-title p", {
type: "lines,words"
}),
chars = mySplitText.lines;
tp.fromTo(chars, 1.5, {
opacity: 1,
y: 0,
ease: Power4.easeOut,
stagger: 0.15,
// }, {
// opacity: 0,
// y: 100,
// ease: Power4.easeOut,
// stagger: 0,
// }, "+=0");
//
// function splitRevert() {
// $('.strength-title h1 .line , .free-session-title h1 .line , .photobio-title h1 .line').unwrap();
// mainTitles.revert();
$('.photobio-title p').css('visibility', 'hidden');
mySplitText.revert();
}
This formation is not currently working smoothly for me, if anyone has a possible solution please kindly do help me.
Thank You