Shaun Gorneau last won the day on March 9

Shaun Gorneau had the most liked content!

Shaun Gorneau

Members
  • Content count

    221
  • Joined

  • Last visited

  • Days Won

    3

Shaun Gorneau last won the day on March 9

Shaun Gorneau had the most liked content!

Community Reputation

356 Leader

About Shaun Gorneau

  • Rank
    Advanced Member
  • Birthday May 31

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Hartford, CT
  1. Sure can ... just grab the string length and perform some operation on it to get your desired delay. Then assign that delay value to the delay property. Here's an example,
  2. Something like this would work Edit: Just as mikel suggested ... I put a class on the green lines that should be "on" via the staggerTo.
  3. I think something like this could work for you. Note ... I had to reorder your polygons in the DOM so that they would animate in order.
  4. I choose to animate a div within a masking container because it allows for the use of hardware accelerated attributes; in this case, 'x'. I helped another forum member out in a similar way to to tie a slider to the "scroll" (actually x) position of a group of tiles. It may contain some useful elements for you.
  5. While I can't spend the time to optimize right now ... this might point you in the right direction.
  6. That's because your .box has a height of 400px. Once you put absolute positioning on it, it's removed from the DOM order and its parent, which has no height, becomes a height of 0. Putting a height on .animation (of 400px) solves that issue.
  7. While I'm not diving into the technical reasons behind this particular issue ... a good rule of thumb when using any animation framework is: leave the animation to the framework. Using CSS transitions just muddies the waters since the purpose of transitions is to "animate" changes in property values. I would simply remove the CSS transition and achieve whatever effect they produced with GSAP.
  8. Yeah, that's my fault. The code I posted has window.scrollTo(0,0); inside the setTimeout ... so that call is delayed. Moving it out should take care of that. http://codepen.io/sgorneau/pen/qrzLBx#section-3
  9. This is definitely possible, but the answer would depend on how you are identifying the anchor from the URL passed. For example, if it's a fragment id, you could just setTimeout( function() { if( location.hash && $(location.hash).length > 0 ) { window.scrollTo(0,0); // just to be sure we are at the top TweenLite( 'body' , 1 , {top: $(location.hash).offset().top } ); } }, 1); // I use this timeout to show the page top for a second before scrolling I am using a bit of jQuery for calculating the anchor position cleanly (because I tend to have jQuery already in use on projects), but you can do that with vanilla JS if you're not using it.
  10. I'll be honest, this is a tough question to decipher. But, if you want to immediately see the result of any tween that is paused, all you have to do is set the tween's progress() to 1. myAnimation.progress(1);
  11. If you're talking about the effect seen on the page at https://www.beoplay.com/products/beoplayh8#materials ... that can be pretty easily accomplished with basic CSS only. http://codepen.io/sgorneau/pen/NqJYyR?editors=1100
  12. @PointC ... absolutely! I was so focused on the label aspect of this I neglected the fact that #elem-1 and #elem-3 could simply be one tween (good call!) The reason I went the label route and not the position route was I'm not 100% sure if we are actually at 0 (in the project itself) for this group of tweens. But you're right ... I should have thrown that out there too
  13. I'm not sure exactly what is being asked here, but you can use the first method you illustrated by adding a label to the timeline and placing your tweens at that label. var tl = new TimelineLite(); tl.add('start'); tl.from('#elem-1', 1, { y: -100 }, 'start') .from('#elem-2', 1, { y: 100 }, 'start') .from('#elem-3', 1, { y: -100 }, 'start'); http://codepen.io/sgorneau/pen/LWXMOL Is this simpler though? I think so, but that might be up for discussion
  14. My only question would be, why worry about console log messages? They are quite valuable, and the ones that don't apply to you are of no consequence.
  15. The problem is twofold: your triggerElement (.menubox) is at position 0 0 ... so it is immediately triggered. Also, its position is fixed, meaning it will not react to the scroll action (it doesn't move within it's scrolled parent). To illustrate, I've made the menu absolutely positioned and moved it down a bit so that it will scroll up and trigger the action. http://codepen.io/sgorneau/pen/aJQPvd But, depending on the complexity of your project, this is a specific instance where I wouldn't even rely on scroll magic ... I would simply poll the distance the page has scrolled and, based on min/max parameters, animate the menu in and out at those defined parameters.