Hi all !
Right now I need 2 scripts in the same js file :
First one called in my index.php file
/////NAVIGATION//////////////////////////////////////////////////
Draggable.create(".vignettes", {
bounds:".h-content",
allowNativeTouchScrolling:false,
type:"x",
throwProps: true
}
)
gsap.set("body", {overflowY:'scroll'});
var scrollSpeed = 0.5; // half of user scroll
var scrollHeight = 10000;
gsap.set("body", {height:scrollHeight, overflowY:'scroll'});
$(document).on("scroll", function (){
const pixels = $(document).scrollTop();
gsap.to('.vignettes',1,{x:-0.5 * pixels})
//'0.5' = half speed of user scroll
console.log(pixels);
})
Second one called in my apropos.php file
/////A PROPOS SPLITTEXT////////////////////////////////////////////////
var tl = gsap.timeline(),
mySplitText = new SplitText("#quote", {type:"words,chars"}),
chars = mySplitText.chars; //an array of all the divs that wrap each character
gsap.set("#quote", {perspective: 400});
tl.from(chars, {duration: 8.8, opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:"back", stagger: 0.01}, "+=0");
console.log(mySplitText.version);
The first one seems to disturb the second one. I don't understand why ...