[Position issue]

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

[Position issue]

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 });

}

 

[Position issue]

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.

[Position issue]

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"?