Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Shaun Gorneau last won the day on March 3 2019

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Shaun Gorneau

  1. This is because of the durations staggering the "complete" times of the respective tweens. They all start at 0 ... but end at various times. So a reverse of the timeline will respect when the tweens ended with respect to each other. Essentially, the tweens are left justified in a timeline (all start at the same point) ... what I believe you are asking is, on reverse, to right justify them in the timeline (all end at the same point) which would mean adjust their position properties to be the total timeline duration minus the tween duration. Instead of a reverse ... I think you may be looking for a new set of tweens.
  2. One question I have is why this is making of use of a Timeline vs a simple Tween?
  3. Hi @therddlr, Here is a pen showing how to both the line `y translate` and a reveal (using a parent with overflow hidden). I piggy-backed on jQuery (wrap , unwrap) to make it simple ... but you can find a native way to handle it if you are not using GSAP. Hope this helps!
  4. Hi @Pete Barr, There are just 2 ways to set/get object properties in Javascript ... dot notation and bracket notation (like addressing an array index). With the dot syntax you don't have any wiggle room with dynamic keys ... as you can not do the following someObject."property_"+i = "someValue"; but you can do someObject["property_"+i] = "someValue"; So @GreenSock was using that syntax to show you how to get at a dynamic variable (which is actually a dynamic property key). It might not be so clear because what is being passed as the key is the variable `myWeight` which was previously set to the value of "--myWeight"+(index+1) which is essentially the same as vars["--myWeight"+(index+1)] = 900; which addresses when evaluated, for example vars["--myWeight1"] = 900; vars["--myWeight2"] = 900; vars["--myWeight3"] = 900; vars["--myWeight4"] = 900; // etc Which, if syntax allowed, would be like vars.--myWeight1 = 900; vars.--myWeight2 = 900; vars.--myWeight3 = 900; vars.--myWeight4 = 900; When using dot syntax, vars.myWeight = 900; "myWeight" would never evaluate to the dynamic properties you're looking for ... the script would be looking for precisely the property "myWeight" in that object (which does not exist). I hope this helps! Shaun
  5. @emilychews One method would be to get all dots (by classname) into an array and generate a random number between 0 and the length of that array minus 1 (for the indexes available in that array) and tween the element randomly addressed. Here is a CodePen illustrating that. (note though that the Pen doesn't look to see if the random integer is different than the previous random integer ... which means the same dot could tween multiple times in a row) Hope this helps! Shaun
  6. Hi @Robert May, That's because Javascript doesn't accept variable variable names the way other languages do. For example, in PHP you can do the following $foo = 'bar'; $$foo = 'baz'; echo $bar; // output would be 'baz' echo ${$foo}; // output would also be 'baz' In Javascript, variables are stored as properties of the window object. So the following illustrates how to use variable variable names in Javascript var tl0 = new TimelineMax({paused: true}); var tl1 = new TimelineMax({paused: true}); var tl2 = new TimelineMax({paused: true}); var tl3 = new TimelineMax({paused: true}); for( var i=0; i<4; i++ ){ console.log( window['tl'+i] ); // outputs the timeline objects } I assume in your example ... console.log(currentTimeline + "Tl") var tempTimeline = document.getElementById(currentTimeline + "Tl") tempTimeline.pause(); ... that `currentTimeline` simply refers to a string ... so console.log will simply concatenate and output what you expect, but that doesn't refer to any timeline. The way you are trying to reference the timeline is through an element selector, which won't work (that's looking for a DOM element). Timeline's are Javascript objects. So, as in the previous examples, the way to reference a Timeline is by its assigned variable name. Here is a codepen illustrating variable variables in Javascript and how to reference a timeline. Hope it helps!
  7. @Robert May Timelines are objects that can be stored in a variable for reference. Example var tl1 = new TimelineMax(); var tl2 = new TimelineMax(); var tl3 = new TimelineMax(); Hope this helps!
  8. @jesper.landberg Here is a thread that gets into some of this and may be a good starting place for you Happy tweening!
  9. Hi @peippo, I think what you're looking to do is trigger a separate timeline at the point in which your scroll-controlled timeline reaches a defined position/progress value. You can do so by breaking your "one-offs" into their own paused timelines and then .call() each wherever you like in the scroll-controlled timeline. Check out the CodePen below to see an example of that starting at line 60. Hope this helps!
  10. Reducing the progress value to 3 decimal places ... in Chrome, Safari, and Firefox I don't see too much jumping around (minimal and infrequent ... which is par for the course as far as any of my experience with parallax). 2. I'm not seeing this ... but I do see browser inconsistencies with the way this attribute is tweened. Firefox tween smoothly between the values ... Safari seems to tween in whole integer steps, and Chrome seems to not tween the value at all. 3 + 4. I think this has to do the browser you're viewing this in and the fact that the values are small (0 to 3 then 0) and it is simply jumping quickly to the values (without tweening between the values). ? I tweened from 0 to 40 to 0 just to get something visual happening for my tests (in item 2) I wish I had a better answer Hopefully someone else does
  11. @selfishound When it comes to animation/tweens/motion ... I would choose GSAP exclusively (I know, surprise there ?). What I mean is ... choose one, not two. Also, you're affecting the same property on the same element, which is why it will jump around. So ... I think it would be best to apply one tween to #logo, and the other (parallax) tween to a parent wrapper. That should give you better control. Here is a CodePen illustrating what I'm getting at.
  12. Without seeing the code driving this, it's pretty tough to diagnose. I would recommend putting this in a CodePen (as simplified as possible while illustrating the issue). Perhaps one thing you want to look at instead of reversing the timelines is "yoyo". https://greensock.com/docs/TweenMax/yoyo
  13. Hi @teejay_hh, You can the .progress() method to make the timeline jump to any point in the timeline's progress (0 being the start, 1 being the end, .5 being the halfway point). Hope this helps!
  14. Where you are using add() to inject the tween/timeline and set a label ... try creating labels with their own add() and using the position parameter to offset which ever tween/timeline you like. Here is a code pen illustrating that, Hope this helps!
  15. Line 261 is the problem ... tl.staggerTo(gearArray, 0.5, {fill: "rgb(255,255,255)", scale: 1}, 0.25, "-=0.75", "GearGreyscale"); You're passing "GearGreyscale" as the onCompleteAll parameter but there is no function GearGreyscale() That's not failing in the subsequent calls ... example tl.to([gearOne, gearTwo], 0.5, {alpha: 0.5}, "-=1", "GearGreyscale") because .to() has no parameters after `position`. Hope this helps!
  16. Hi @redfawx! This effect looks like a pretty simple combination of (perhaps) varied tween durations, easing, and (perhaps) tween distances. I say perhaps because those would depend on the desired effect. Here is a simple CodePen to illustrate
  17. I REALLY like the idea of a custom tag option ?
  18. Glad to help! Happy tweening
  19. From your code, I don't know what you're after. Please create a Code Pen to isolate your issue and I can help you further. At a quick glance (and with some assumptions), I would think you're looking for const timeline = new TimelineMax() timeline .from(el, 0.850, { opacity: 0, // Only opacity here with the following ease ease:Elastic.easeOut, onComplete: () => { done() }, 'someLabel' // Create the label for the Timeline position and set position }) .from(el, 0.850, { y: 50, // // Only y here with the following ease ease: SOME-OTHER-EASE, onComplete: () => { done() }, 'someLabel' // Set position (to label created above) }) .staggerFrom(this.$refs['fullscreen-nav-menu-item'], 1, { y: 50, opacity: 0, ease:Elastic.easeOut, }, 0.05, "-=0.8")
  20. You could tween each separately and place them at the same timeline position
  21. Only a few minutes to chime in here ... but you could get the progress() at each label, determine if the difference between the two is greater than .5 also have a look at getLabelTime() (I think :/) If so, set the tween to reverse() to the start and then reverse to the destination label using tweenTo().