Jump to content
GreenSock

LanceH

Set draggable rotation on page load

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,
 
I need to set the rotation to a previous value when the user returns to a page. So they've interacted with the rotary dial, I've saved where they rotated to, they've navigated away then come back to the page. I'd like to display the dial back to where they left it.
 
I searched here and the answers provided didn't seem to work. No movement, no errors in console either.
 
My code:

var rotationSnap = 22.5;
var maxRotation = 270;
var $length = $('#length');

var length_val = $length.val();

var draggable = Draggable.create('#knob', {
    type: "rotation",
    bounds: {maxRotation:270, minRotation:0},
	liveSnap: function(endValue)
	{
		spot = Math.round(endValue / rotationSnap) * rotationSnap;
		$length.val(spot);

        return spot;
    }
});

if (length_val)
{
	TweenLite.set("#knob", {rotation: length_val});

	draggable[0].update();
}

I tried setting the rotation to a fixed value just to test and still no joy.

Link to comment
Share on other sites

Hello LanceH, and Welcome to the GreenSock Forum!

 

Have you tried to only run that code after the DOM is fully ready and the window is fully loaded?

// wait until DOM is ready
document.addEventListener("DOMContentLoaded", function(event) {

     // wait until all the window (images, stylesheets, and links) are loaded
     window.onload = function(){

          // code goes here
     
     });
});

See if that helps!

 

If not please provide a codpen demo example:

 

 

:)

  • Like 4
Link to comment
Share on other sites

Hello and thank you for the warm welcome. I did try the onload wrapper with no luck.

 

The real deal might be more helpful than a codepen? http://dev.smartwater.org.nz/quiz/length (drag.js)

 

Rotate the dial and click next. Now click back. The "length" debug on the screen is where I'd like it to go to.

 

I've hard coded it currently to 90 as I've got another problem with it.. the liveSnap method seems to run four times on page load which resets the hidden input.

Link to comment
Share on other sites

  • Solution

Unfortunately it's much harder to dig through almost 1000 lines of code and try to isolate the issue on a remote server like that. I know it can be a bit of a chore, but creating a reduced test case in codepen or jsfiddle can actually be a great practice that might expose the issue without even needing input from us. If not, at least there will be a codepen that we can tinker with and see exactly what's going on. 

 

It's not abnormal for the liveSnap to run several times. Long story. But I definitely would recommend that you not write code that only works if liveSnap only runs once.

 

Also please make sure you're using the latest Draggable version. 

  • Like 2
Link to comment
Share on other sites

Also please make sure you're using the latest Draggable version. 

 

Ah man, I missed that.. Made a pen then updated the three files I'm using to 1.19.0 and the setting on page load is working as expected. Thanks for the comment.

 

I've fixed the other issue by using a data attribute instead of a settable value.

  • 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.
×