I have used this to move a dial using the mouse wheel. The range of the variable needs to be set in line 4 (highest value 0) and line 7 (lowest value -360). These correspond to Start value -360 and Initial value 0. my dial worked backwards.
You could set the slide to move on when the variable gets to a certain number with a Jump to Slide trigger.
If someone can help me get it working in IE that would be great.
Ok here is a test file. Please remember it is not perfect and does not seem to reset properly when you go back. Only works in Chrome or Edge. Should get you started though.
Thanks for your inputs it was really helpful to us.
we have achieved what we were looking for but we are facing just one issue that is for slide transition.
Basically we are trying to make one pager style in Storyline, so when we scroll down to next slide the transition goes upward, but if we scroll up to previous slide then again as a transition it move upwards.
so can we play with some JAVA for slide transitions, that is if we scroll down the transition goes upward and if we scroll up the transition goes downward.
it will be a great help if we get solution for this slide transition effects.
As Phil says you can't control the transitions with JavaScript. I like the suggestion of duplicate slides.
I'm guessing you want to scroll the page up and down with the scroll wheel like a web page? If this is the case then you might be better to try this in Rise if you have an Articulate 360 subscription. It will give you that ability natively (no javascript).
Are you able to share a file with me so I can see what you are trying to do?
First thanks to David for a brilliant idea. With that variable we can reproduce many css/js like animations they use in web design. As for the idea to create a one slider, you would probably want to use a scrolling panel and place a tall object inside. See the file attached.
It is best to remove the eventListener when leaving the slide, because when revisiting the slide it will run a new eventListener so the variable will be updated from both listeners. Here is a solution:
var player=GetPlayer();
var scrollCount = player.GetVar("scroll", scrollCount);
function scrollCounter(e){ if(e.wheelDelta<0 && scrollCount<59){ scrollCount++; }
A small update: I found that it is better to use 'wheel' instead of 'mousewheel' as the latter is not supported by Firefox. Then instead of 'e.wheelDelta', it will be 'event.deltaY' which is going to be inverted as compared to 'e.wheelDelta'.
17 Replies
You would need javascript using the onWheel event to increment a variable.
Yes, Just gotta work.
I am a javascript newbie, but I have a partial solution. So far I can only get it to work in Chrome and Edge.
This javascript will monitor the mouse wheel and adjust a variable:
var player=GetPlayer();
window.addEventListener('wheel', function(e){
var scrollCount = player.GetVar("Dial1");
if(e.wheelDelta<0 && scrollCount<0){
scrollCount++;
}
else if(e.wheelDelta>0 && scrollCount>-360){
scrollCount--;
}
player.SetVar("Dial1",scrollCount);
});
I have used this to move a dial using the mouse wheel. The range of the variable needs to be set in line 4 (highest value 0) and line 7 (lowest value -360). These correspond to Start value -360 and Initial value 0. my dial worked backwards.
You could set the slide to move on when the variable gets to a certain number with a Jump to Slide trigger.
If someone can help me get it working in IE that would be great.
can you please share the source file as it will be great help.
Ok here is a test file. Please remember it is not perfect and does not seem to reset properly when you go back. Only works in Chrome or Edge. Should get you started though.
Thank you so much david. it's reality helpful for me.
Hi David,
Thanks for your inputs it was really helpful to us.
we have achieved what we were looking for but we are facing just one issue that is for slide transition.
Basically we are trying to make one pager style in Storyline, so when we scroll down to next slide the transition goes upward, but if we scroll up to previous slide then again as a transition it move upwards.
so can we play with some JAVA for slide transitions, that is if we scroll down the transition goes upward and if we scroll up the transition goes downward.
it will be a great help if we get solution for this slide transition effects.
Regards
You cannot control transitions by javascript, the only way to do this is to have duplicate slides with different transitions applied.
As Phil says you can't control the transitions with JavaScript. I like the suggestion of duplicate slides.
I'm guessing you want to scroll the page up and down with the scroll wheel like a web page? If this is the case then you might be better to try this in Rise if you have an Articulate 360 subscription. It will give you that ability natively (no javascript).
Are you able to share a file with me so I can see what you are trying to do?
Hi David,
We have already achieved the functionality by duplicating the slides, but we were looking something without duplicating.
For your reference we are sharing the file with you, please note we have done some modification in the file which you shared.
Regards
There is no other way to do this
First thanks to David for a brilliant idea. With that variable we can reproduce many css/js like animations they use in web design. As for the idea to create a one slider, you would probably want to use a scrolling panel and place a tall object inside. See the file attached.
It is best to remove the eventListener when leaving the slide, because when revisiting the slide it will run a new eventListener so the variable will be updated from both listeners. Here is a solution:
var player=GetPlayer();
var scrollCount = player.GetVar("scroll", scrollCount);
function scrollCounter(e){
if(e.wheelDelta<0 && scrollCount<59){
scrollCount++;
}
else if(e.wheelDelta>0 && scrollCount>0){
scrollCount--;
}
else if(scrollCount == 59){
window.removeEventListener('mousewheel', scrollCounter);
}
player.SetVar("scroll",scrollCount);
}
window.addEventListener('mousewheel', scrollCounter);
It's possible to remove the listener with the next button or any other.
A small update: I found that it is better to use 'wheel' instead of 'mousewheel' as the latter is not supported by Firefox. Then instead of 'e.wheelDelta', it will be 'event.deltaY' which is going to be inverted as compared to 'e.wheelDelta'.
Although i didnot finish this completely, the concept of a OnePage with mousewheel control ( even on Edge, IE or Firefox ) is working properly.
https://360.articulate.com/review/content/0381f6c9-6baa-45e2-b5d8-375fa803ffa1/review
Although it does look like a One Page Website, it in fact are multiple Storyline line slides, controlled by GSAP ScrollTrigger ( https://greensock.com/scrolltrigger/ )
Hi Math !
I love your example using the GSAP ScrollTrigger. Can you please share the original SL file so I could deconstruct how you did it ? Thanks !
ScrollTrigger is a paid bonus plugin of GSAP, so i cannot share that.