Hello,
I am trying to do the same, I think. It's not working for me, I've tried a couple approaches, maybe you'd be able to help out?
Basically I have some text (2 sentences) showing up on a canvas, next I would like to move (both sentences) up to make place for something else.
My canvas and the animations already restart on window resize.
Currently I want to use the "left" & "top" options because I haven't found another efficient way to move the sentences with proportion to the window's height as to not go off screen.
Here's my code:
var width, height;
function resize() {
width = window.innerWidth;
height = window.innerHeight;
}
var timeline;
function translate() {
resize();
timeline = gsap.timeline();
timeline.from("#fade1", {
opacity: 0,
y: height / 3,
duration: 1.8,
ease: "elastic",
delay: 0.8
})
.from("#fade2", {
opacity: 0,
y: -height / 3,
duration: 2,
ease: "elastic",
}, "+=0.5")
.to('#fade1', {left: '20%', top: '20%', duration: 2});
}
$(window).resize(function() {
timeline.kill();
gsap.set("#fade1, #fade2", {clearProps: true});
translate();
});
translate();
Any advice would be greatly appreciated.
Julian