https://codepen.io/imagica/pen/KKQzPea
When scrolled down, the red block moves -100px up (this works). Now, when scrolled completely back top top, the red block should scroll down 100px again.
And then start over again when scrolled down.
EDIT: I managed it with toggleActions reverse but the problem is, i want want it to start fast and slow in the end but when "reversed" it goes slow at start and fast in the end, is there a way to change this? Found yoyo but it does not work... ?
let tl = gsap.timeline({
yoyo: true,
defaults: {
duration: 3,
ease: "power4.out"
},
scrollTrigger: {
trigger: ".box1",
toggleActions: "play none none reverse"
}
});
tl.to(".box1", {y: -100,})
How can i do this?
Marco