Jump to content
Search Community

Position issue

therock100 test
Moderator Tag

Recommended Posts

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

 

Link to comment
Share on other sites

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
}

 

 

Link to comment
Share on other sites

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

}

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...