Position issue

[therock100 0 Likes (Newbie)]

Hello all,
I came across GSAP for the first time last week and I am very excited!

 

Now for the first time I've encountered a problem that I can't get solved on my own.

Note: I am using Articulate Storyline, which now also has GSAP 3.5.1 implemented.

 

If I want to animate elements  that are directly inserted in Storyline, it works great with the following code:  

var tl = gsap.timeline();

var icon= document.querySelectorAll("[data-acc-text='icon']");

tl.to(icon, {repeat: 10, yoyo: true, ease: "power1. inOut", duration:2, repeatDelay: 0.25, scale:1.45 });

But the problem is: As soon as I change the size of my browser window or I rotate my phone and work in landscape mode, the animated elements jump all over the screen.

Now I read that the following options might help:

• - using fixed elements in the Storyline for reference positions
• - use vw (=viewportwidth) and/or vh (=viewportheight) for your animations. That is relative and thus can work properly.
• - add an eventHandler for the browserchange... JQuery has resize( ) for that... in Vanilla Javascript something like this works too.

However, I'm currently completely out of the loop, since, as I said, I have almost no experience with GSAP, CSS and Co. (or am just gathering my first experiences. :))

So how would I have to adapt my code from above, so that the elements do not "jump around"?

 

[tailbreezy 221 Likes (Specialist)]

Hello there,

 

I am not sure what could be the problem, it is hard without seeing a minimal demo or live version.

There is one typo though:

ease: "power1. inOut",

It should be without the extra space.

[therock100 0 Likes (Newbie)]

Hi tailbreezy,

 

thanks for your reply! The typo wasn't the problem.

Here you can see what happend:

https://360.articulate.com/review/content/58842f33-bca8-4af7-a6f4-cc0724fd688b/review

 

Resize your browser and you will see what I mean.

[tailbreezy 221 Likes (Specialist)]

You can rewind your progress to 0, gsap.killTweensOf( target ) and recreate your animation.

 

window.onresize = () => {

  timeline.progress(0) // go back to before the timeline progress has moved
  gsap.killTweensOf( '.target' ) // kill ongoing tweens
  
// re-init your animation
// if you initially have a function that sets up your timeline, you can just called it here
}

 

 

[therock100 0 Likes (Newbie)]

Hi tailbreezy,

 

tanks again!! I have tested your code, but the problem still exists. The element does not move to the position where it should be. Now here is my code. You can see that I add a delay to the last line to demonstrate the problem. I test your code but the problem still exists. The element isn't move to the position it shoud be. Here is my code now. You can see, I'm putting in a delay into while the last line to demonstrate the issue.

 

https://360.articulate.com/review/content/58842f33-bca8-4af7-a6f4-cc0724fd688b/review

 

What might help?

 

var tl = gsap.timeline();

var icon= document.querySelectorAll("[data-acc-text='icon']");

tl.to(icon, {repeat: 100, yoyo: true, ease: "power1. inOut", duration:2, repeatDelay: 0.25, scale:1.45 });


window.onresize = () => {
tl.progress(0) // go back to before the timeline progress has moved
gsap.killTweensOf(icon)

tl.to(icon, {repeat: 100, yoyo: true, ease: "power1. inOut", duration:2, repeatDelay: 0.25, delay: 2, scale:1.45 });

}

 

[tailbreezy 221 Likes (Specialist)]

I think this should solve your issue, apart from the fact that

Quote

power1. (space) inOut

is still incorrect. You probably have some other issue as well, it is hard to tell without a live minimal demo.

Try to recreate your problem in Codepen and see if it still persists.

[ZachSaucier 7,163 Likes (Superhero)]

Hey therock100 and welcome to the GreenSock forums.

 

Try this:

var tl;
function createAnim() {
  if (tl) tl.pause(0).kill();
  
  tl = gsap.to("[data-acc-text='icon']", {
    repeat: 100,
    yoyo: true,
    ease: "power1.inOut",
    duration: 2,
    repeatDelay: 0.25,
    scale: 1.45
  });
}

window.addEventListener("resize", createAnim);

It's best to use addEventListener and kill the timeline itself. I think you'd learn a lot from my article about animating efficiently.

 

With that being said, it looks like this might only be fixing part of the issue. The rest is likely due to the setup/CSS of your content.

[therock100 0 Likes (Newbie)]

Yeah, this is problably a storyline issue... I will come back with a solution when I got one..

[Math 10 Likes (Newbie)]

This is a Storyline problem and has little or nothing to do with GSAP. As Storyline creates its own scope for every trigger in it... when you add a element in the Storyline editor... it will behave properly on scaling...as the core of Storyline can access it. So you can use static elements and calculate the wanted endposition for GSAP tweens by using gsap.getProperty( mystaticElement.x)

Storyline itself uses eventHandlers in its slides.min.js code...
 

                            onResize: function () {
                                this.setState({ winScale: this.props.getWinScale() });
                            }

and in the bootstrapper.min.js file included ...

                                resizing: function (t) {
                                    var e = t.touches || [t],
                                        n = r(e, 1)[0],
                                        i = n.pageX - this.refs.window.offsetLeft - this.resizeOffset.x,
                                        o = n.pageY - this.refs.window.offsetTop - this.resizeOffset.y;
                                    (i = Math.max(100, i)), (o = Math.max(60, o)), (this.refs.window.style.width = i + "px"), (this.refs.window.style.height = o + "px");
                                },

Alas are these files default minimized...you can unminify them and figure out where what happens...but as these files are from the core of Storyline adapting them is tricky as they get replaced everytime Storyline updates.