Jump to content

Search the Community

Showing results for tags 'wheel'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 5 results

  1. 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(); } });
  2. szsoma

    Lucky wheel

    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?
  3. Hello, I need wheel spinning like below video. could you please guide me /Ganapathi
  4. 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
  5. 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}) );