therock100

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

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

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.

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