Jump to content
Search Community

Shaun Gorneau last won the day on September 8 2021

Shaun Gorneau had the most liked content!

Shaun Gorneau

Moderators

  • Posts

    837

  • Joined

  • Last visited

  • Days Won

    23

 Content Type 

Everything posted by Shaun Gorneau

24
25
26
...
33
Page 25 of 33  
  1. Shaun Gorneau
    Dealing with background size can be tricky because of all the factors that determine which dimension grows due to various conditions. I would simply let the background image maintain all of its initial property values and react to the containers changing property values. Doing that means animating the element itself (for which the background image is being applied). [edited because I typed "simply" like 74 times, like an idiot.]
  2. Shaun Gorneau
    Why wouldn't you package everything into one onUpdate call?
  3. Shaun Gorneau
    I guess my question would be "why?". GSAP is great at manipulating element properties over time and managing those timelines. The pen above illustrates something a bit outside of that scope. While I'm sure something could be whipped up with GSAP ... why when the solution in the pen handles it perfectly?
  4. Shaun Gorneau
    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,
  5. Shaun Gorneau
    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.
  6. Shaun Gorneau
    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.
  7. Shaun Gorneau
    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.
  8. Shaun Gorneau
    While I can't spend the time to optimize right now ... this might point you in the right direction.
  9. Shaun Gorneau
    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.
  10. Shaun Gorneau
    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.
  11. Shaun Gorneau
    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
  12. Shaun Gorneau
    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.
  13. Shaun Gorneau
    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);
  14. Shaun Gorneau
    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
  15. Shaun Gorneau
    @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
  16. Shaun Gorneau
    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
  17. Shaun Gorneau
    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.
  18. Shaun Gorneau
    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.
  19. Shaun Gorneau
    A few things ... 1. With vid.addEventListener ... you haven't defined `vid` 2. Your getElementById selector for the video doesn't match your id on the video element 3. I changed the visibility property to opacity 4. Start with the overlay opacity at 0 to avoid a flash at the beginning https://codepen.io/sgorneau/pen/evragw?editors=0010
  20. Shaun Gorneau
    Sure, you can us the video/audio `timeupdate` method to poll the current time ... you can then use logic to display/hide any element(s) as you need.
  21. Shaun Gorneau
    Glad it helped.
  22. Shaun Gorneau
    Because of the way transforms work, the images themselves will have no affect on each other if transformed directly. Illustrated here, http://codepen.io/sgorneau/pen/evyVjE So, to make them transform "together" is right on with your line of thinking; transforming the parent. Illustrated here, http://codepen.io/sgorneau/pen/qrpxMy
  23. Shaun Gorneau
    .progress(1) should go right to the very end of the timeline with no amount of tweening. That is unless progress itself is being tweened; e.g. vat tl = new TimelineMax(); TweenMax.to( tl, 1, {progress:1} ); Do you have a codepen illustrating your issue?
  24. Shaun Gorneau
    Have a look at this pen http://codepen.io/sgorneau/pen/rywjQW
  25. Shaun Gorneau
    `x` and `xPercent` manipulate the element's CSS transform property, which solely affects the element being transformed with no regard for positioning, parent, or the document. If you want to move something with`x` to a specified point - in your case, a certain percentage of the screen width - you must calculate that position and then set the x value to that. http://codepen.io/sgorneau/pen/rywjQW
24
25
26
...
33
Page 25 of 33  
×
×
  • Create New...