Search the Community

Hey there, I'd like to move an element horizontally using wheel and/or drag on desktop and touch and/scroll on mobile. I've set up Draggable for easiest possible scrolling with inertia, and Observer for wheel events. I can sort of update a target value for the element to tween to, but the back-and-forth of the respective x values won't quite work. Any tips? Best regards Constantin

Hello! I have a question, below is an example of the scroll "roulette" I have two questions: 1. Is it possible to do infinite scrolling, for example, it stopped at 100 (------->), the next number is 50 (<-------), and it should continue to scroll right (------>) and stop at 50, not left (<-------) * -------> - this direction: D 2. Is it possible at each start to first do several iterations from start to finish (as when scrolling a wheel) and only after that stop at the desired number? At the moment, if we stand at 10 and select 11, the cursor will move slightly, but it is necessary that he first spins like crazy and only then stops This library is amazing! ? Thanks!

Hello. Ran into a problem. I am trying to animate wheel like draggable. function is "slideAnim". Can you tell me what I'm doing wrong? Thanks .

Hello to all of you greensockers... I need help,i am new to the world of Greensock. So, I need all these functionalities that I currently have. But I need to start the wheel from a certain number and stop it at a certain number? And not from the certain time point,as it is now. Thanks...

I would like to force a rotating drag element to rotate according to the mouse X axis instead of the actual circular move, I don't know if this feature is implemented in Draggable. PS : The slider on the Codepen doesn't affect anything, it's only here to help understand my problem. Thanks!

how to make Scroll with text fill like link below I have done everything I think I can do and have not had a similar result even I hope for any help and at least an idea http://clapat.ro/themes/hervin-wordpress/

Hi! I would like to make a lucky wheel (something like this) and I am in trouble with the indicator at the topright corner. I've 12 sectors on the wheel and the indicator sholuld move when the little sticks are under it. The problem is the wheels easing and the triggering. Can someone help me?

Hey, I am desperately searching for a way to play one step of my timeline when the a mouse scroll gets started. All methods that I have found trigger the events multiple times on scroll and gsap gets really confused. Is there a convient way to build something like that with greensock? What I want to build is a animation triggered webapp like these: https://theshift.tokyo/ http://www.contiducco.it/index.php?route=common/home My Code at the moment: $(window).bind("mousewheel DOMMouseScroll", function(event) { var docTimeline = new TimelineLite({ paused: true }); docTimeline.add(TweenLite.to(".lightLogo", 1, { y: "200%" })); docTimeline.add(TweenLite.to(".text", 1, { x: "0%" })); // Events when scrolled down. if ( event.originalEvent.wheelDelta < 0 || event.originalEvent.detail > 0 ) { docTimeline.play(); } else { docTimeline.reverse(); } });

Hello, I need wheel spinning like below video. could you please guide me /Ganapathi

Hi all, I am new to the greensocks family and its libraries and I am very impressed how easy it is to build beautiful animations. I have read already a lot in this forum, but I need some advice or hints what would be the best practice approach to set up a spinning wheel based on some inline svg text. I wanted to add a screenshot what I want to achieve but struggled with the upload form and published this entry all ready. I am going to edit it now I basically have five words below each other, where the one in the center (position 3 when counting from the top) is the highlighted word and the other four words get some kind of softer design (color, opacity). The spinning wheel should spin from bottom to top and after the fifth word a sixth and seven word comes into view at the bottom. So it is always five words visible and a total of seven words. Words that go out of view in the top should be come into view at the bottom again. My approach to simulate this is to set up an inline svg file allowing one whole spin from the center word "BRAND" and than repeating this without the yoyo effect. Here is the svg: <svg preserveAspectRatio="xMinYMin meet" class="wheel-svg" version="1.1" width="800" height="400" viewBox="0 0 800 400"> <g transform="translate(0,0)"> <g transform="translate(0,250)" class="wheel-container"> <text x="0" y="-225" class="term term00">SMELL</text> <text x="0" y="-150" class="term term01">HELL</text> <text x="0" y="-75" class="term term02">SHOCK</text> <text x="0" y="0" class="term term03">BRAND</text> <text x="0" y="75" class="term term04">COOL</text> <text x="0" y="150" class="term term05">NICE</text> <text x="0" y="225" class="term term06">EYE</text> <text x="0" y="300" class="term term07">SMELL</text> <text x="0" y="375" class="term term08">HELL</text> <text x="0" y="450" class="term term09">SHOCK</text> <text x="0" y="525" class="term term10">BRAND</text> <text x="0" y="600" class="term term11">COOL</text> <text x="0" y="675" class="term term12">NICE</text> <text x="0" y="750" class="term term13">EYE</text> </g> </g> </svg> Since the words which are not in the center should have a different opacity setting I came up with a timeline for each word and a .to() animation for each transition to the next word position. This is the timeline for one (!) word out of 13: tl05 = new TimelineLite(); tl05 .to(term05, stepFrame, { css: {className: 'term term04'}, attr: {y: '-=75'}, ease: Linear.easeNone }) .to(term05, stepFrame, { css: {className: 'term term03'}, attr: {y: '-=75'}, ease: Linear.easeNone }) .to(term05, stepFrame, { css: {className: 'term term02'}, attr: {y: '-=75'}, ease: Linear.easeNone }) .to(term05, stepFrame, { css: {className: 'term term01'}, attr: {y: '-=75'}, ease: Linear.easeNone }) .to(term05, stepFrame, { css:{className: 'term term00'}, attr: {y: '-=75'}, ease: Linear.easeNone }); In the end I had to set up the master timeline for the wheel like this: wheel03 = new TimelineMax({repeat: 20}); wheel03.add(tl01, 0); wheel03.add(tl02, 0); wheel03.add(tl03, 0); wheel03.add(tl04, 0); wheel03.add(tl05, 0); wheel03.add(tl06, 0); wheel03.add(tl07, 0); wheel03.add(tl08, 0); wheel03.add(tl09, 0); wheel03.add(tl10, 0); wheel03.add(tl11, 0); wheel03.add(tl12, 0); wheel03.play(); TweenMax.to(wheel03, 0.1, {timeScale: 8, ease: Circ.easeOut}) TweenMax.to(wheel03, 4.9, {timeScale: 0, delay: 6, ease: Circ.easeOut}) I know I could write a custom function to have the timelines for the words etc. created dynamically, but as this is just a proof of concept and I am a total newbie I am wondering if you could give me a hint to a better / best practice approach I am thankful for any advice or tips what I can do better. Thanks and best regards Patrick

Hey guys, I've been a long-time user of the Greensock platform, however I am having trouble getting the desired effect in Javascript. The issue is a follows: I have a prize wheel (a la wheel of fortune) which has 16 parts. The user clicks a button to spin the wheel and the wheel spins for a set duration (to match a sound effect). The landing (prize) location of the rotation is determined by the server and that all works. While I can get the wheel to land at the proper, pre-determined, positions, I can't get it to do so smoothly. My poor attempt is below. Now I know this is not the proper way to do it for the obvious reason, it is not a smooth motion, but it's a close as I could get to the effect I need. What I want is since i know the destination rotational value, I want to have the wheel spin (ease in to full speed, rotate X amount of times, then slowly ease out [decelerate] to the desired rotation). The question remains, how the heck can I do this? Any help would be much appreciated. var tl = new TimelineMax(); tl.append( TweenMax.to($('#wheel'), 1, {css:{rotation:360}, ease:Quad.easeIn}) ); tl.append( TweenMax.to($('#wheel'), .75, {css:{rotation:360}, ease:Linear.easeNone, repeat:10, yoyo:false}) ); tl.append( TweenMax.to($('#wheel'), 1, {css:{rotation:data.degrees}, ease:Sine.easeOut}) );