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


Community Answers

  1. Shaun Gorneau's post in scrollTo when coming from external link/site was marked as the answer   
    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.

    See the Pen qrzLBx#section-3 by sgorneau (@sgorneau) on CodePen
  2. Shaun Gorneau's post in Add acction to a video was marked as the answer   
    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

    See the Pen evragw?editors=0010 by sgorneau (@sgorneau) on CodePen
  3. Shaun Gorneau's post in Using a timeline to act upon multiple elements simeltaneously was marked as the answer   
    Because of the way transforms work, the images themselves will have no affect on each other if transformed directly. Illustrated here,

    See the Pen evyVjE by sgorneau (@sgorneau) on CodePen
    So, to make them transform "together" is right on with your line of thinking; transforming the parent. Illustrated here,

    See the Pen qrpxMy by sgorneau (@sgorneau) on CodePen
  4. Shaun Gorneau's post in Moving timeline to the end, then reversing was marked as the answer   
    .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?
  5. Shaun Gorneau's post in Percentage animation based on parent width was marked as the answer   
    Have a look at this pen

    See the Pen rywjQW by sgorneau (@sgorneau) on CodePen
  6. Shaun Gorneau's post in Responsive slider timeline was marked as the answer   
    I've forked the pen above to introduce "snap points".
    What I've done is calculated the width of 1 tile divided by the width of the animated container to get a decimal representing the increment on a 0 to 1 point scale (which is appropriate for the timeline) for each tile movement (just multiply that number by 100 for the 0-100 scale value the jqueryui slider uses). I also have an array of "snap points" built using that increment decimal times `var i` in a loop up to the number of tiles in the animated container; which is the total number of tiles minus the number visible at any given time ... in this case, 9 total with 3 visible ... that gives us 6 snap points. Lastly, I have a function that looks through an array (our snap points array in this case) and finds the closest value it contains compared to any number passed to it. So, when the UI slider is done "sliding", its position/100 is passed to this function, the function looks through the snap points array to find the closest value, that value is returned, the timeline is animated to that value and the slider's position is animated to that value*100.
    Important thing to note here ... I have set `ease: Power0.easeNone` (line 44) on the timeline ... easing will interfere with the 0 - 1 scale with regard to equal, incremental chunks for the snap points. I am, however using an ease when tweening the timline progress to the snap point value (line 71).

    See the Pen mWRZob by sgorneau (@sgorneau) on CodePen
  7. Shaun Gorneau's post in GSAP image slider was marked as the answer   
    One thing I would offer is, rather than looping through the navigation <li>s and assigning a click action to each independently, I would put a generic class on each (`nav-opt` in my example) along with an index data-attribute to quickly get its "place" and navigate with the same logic you used.
    I forked your pen and added a bit where you are constructing the navigation to add the generic class and the data-attribute, and modified your click event handler at the end.

    See the Pen ZeBKKW?editors=0110 by sgorneau (@sgorneau) on CodePen
  8. Shaun Gorneau's post in Horizontal Line Preloader was marked as the answer   
    I'm not sure which side of this the question is on ... how to execute the animation or how to feed actual data to the animation progress.
    Here is how to animate a loading bar

    See the Pen vyYQJO by sgorneau (@sgorneau) on CodePen
    To control it with actual progress data, simply pause it from the get go and continually set the progress property with an updated value based how how you are calculating actual progress on a 0 to 100 scale.
  9. Shaun Gorneau's post in Help getting started creating a jalousie effect was marked as the answer   
    Here is a quick example 
    See the Pen qadqxE?editors=0110 by sgorneau (@sgorneau) on CodePen
    And just a note ... this only shows 1 image sliced ... no transition to another image behind it. All that would require is the same manipulation principles (and CSS to stack the .jalousie divs) and placing these tweens into a timeline.
    And by adding a few data attributes to each .jalousie divs to swap in some hardcoded settings, you can give more control about number of slices, speed of animation and direction of animation) to complete the package.
  10. Shaun Gorneau's post in How to run timeline continuously on mouse hover was marked as the answer   
    Oh, OK. Instead of moving -=200px, you should move the entire width of the strip minus the window width. When it reaches the end of the strip (or, more precisely, when it reaches the end of the tween which happens to be the length of the strip - the window width), it will just naturally stop. With the right button you can just call reverse().

    See the Pen JXrYoX?editors=0010 by sgorneau (@sgorneau) on CodePen
  11. Shaun Gorneau's post in Replicate A Sunrise was marked as the answer   
    You might want to look at the Bezier Plugin for animating along a defined path. http://greensock.com/docs/#/HTML5/Plugins/BezierPlugin/
  12. Shaun Gorneau's post in Accordion Slider Fullscreen was marked as the answer   
    This requires a two part answer. First, you have to be sure your navigable sections are sized using the appropriate methods to fill the viewport, so that's a CSS task. There are a number of ways to accomplish that.
    Next you have to intercept the menu option clicks ( most likely with event.preventDefault() ), grab the URL path and match some element in the DOM with that string (by ID, class, or some data-attribute).
    Lastly you'll animate the scroll position to the offsetTop of the matched element.
  13. Shaun Gorneau's post in svg, show and hide without transition was marked as the answer   
    Hi benoit, you can use set()
    tl.set('#el' , { autoAlpha: 0 } );
  14. Shaun Gorneau's post in Simple Question on for Loops and using Repeat on Random xy was marked as the answer   
    Without getting too ahead and assuming what you want here, the first thing I think needs to happen is each bubble needs to be its own timeline. Secondly, the repeat property on the to() method will keep it from ever reaching the next animation in the chain. Have a look here,

    See the Pen ZQyaXZ?editors=001 by sgorneau (@sgorneau) on CodePen
    Lastly, I would assume that the bubbles should not repeat their own positions and timings repeatedly ... I would update the parameters with an onComplete call.
  15. Shaun Gorneau's post in Centering an animation on a selected element was marked as the answer   
    Is this what you are after?

    See the Pen rxxPJY by sgorneau (@sgorneau) on CodePen
  16. Shaun Gorneau's post in Autoalpha Confusion was marked as the answer   
    Take a look here, you can simplify the code quite a bit, and the results are (I believe) what you are looking for.

    See the Pen VvjMoW by anon (@anon) on CodePen
  17. Shaun Gorneau's post in applying cLassName property to hypen separated class was marked as the answer   
    Where you are using myClass ... that's an object, not a string. Just like in naming any variable, hyphens are not allowed. If I did the following
    a = 0; b = 1; a-b = 2; // <- I'm saying a minus b = 2 If you want to tween a class name (with or without a hyphen), reference the object with the class selector
    TweenMax.to(".myClass-hypen", .3, {className:"yourClass"});
    See the Pen GpRaRe by sgorneau (@sgorneau) on CodePen
  18. Shaun Gorneau's post in Expand div from bottom to top? was marked as the answer   
    Use a child element within the wrapper, absolutely positioned and bottom: 0;
    Then tween the height of the child;

    See the Pen EjBzwB by sgorneau (@sgorneau) on CodePen
  19. Shaun Gorneau's post in Play animation once was marked as the answer   
    If I understand correctly, you want the Tween (once triggered) to remain in the tweened position and not reverse back to it's pre-triggered state when scrolling back ... is that right? If so, that's as simple as setting the reverse value to false on the scene.

    See the Pen JdqEwZ by sgorneau (@sgorneau) on CodePen
  20. Shaun Gorneau's post in Reverse TimelineLite was marked as the answer   
    The problem lies in creating a new timeline on every click ... essentially, it is issuing the reverse() method on a timeline that hasn't yet played. Create the timeline outside of your click event and then control it with the click event.

    See the Pen gpQyzB by sgorneau (@sgorneau) on CodePen
  21. Shaun Gorneau's post in marquee was marked as the answer   
    Hi malballah,
     You can use a very similar technique I used to demonstrate a side-scrolling background for someone else's question

    See the Pen KpwWgy by sgorneau (@sgorneau) on CodePen
  22. Shaun Gorneau's post in My first tween was marked as the answer   
    Your Javascript is firing before the document is ready. Try
    document.addEventListener("DOMContentLoaded", function(event) { TweenMax.to(".logo", 2, {left:600}); }); or, if using jQuery
    $( document ).ready(function() { TweenMax.to(".logo", 2, {left:600}); }); I'd recommend jQuery since it's ready() method is more involved than "DOMContentLoaded"
  23. Shaun Gorneau's post in Repeat a little function onComplete. was marked as the answer   
    You could shorten it up big time by tweening the red line and then putting the blue line tween on a timeline that repeats infinitely.

    See the Pen RPrwJy by sgorneau (@sgorneau) on CodePen
  24. Shaun Gorneau's post in Start tween from x,y coordinates was marked as the answer   
    Absolutely. You just need to respond to a click event and pass the x/y to a tween created in response to the click. Here is an example,

    See the Pen bddLwL by sgorneau (@sgorneau) on CodePen
  25. Shaun Gorneau's post in Set boolean value in tween / timeline was marked as the answer   
    set() is a zero duration tween ... and tweens are valid for properties with numerical values. I believe that is your issue here (I could be wrong though ).