Jump to content

Shaun Gorneau last won the day on September 8 2021

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Posts

  • Joined

  • Last visited

  • Days Won


Community Answers

  1. Shaun Gorneau's post in How to change other properties while animating was marked as the answer   
    Hi @aleangelico,
    Yes absolutely. But I'm unsure what you're trying to achieve ... you have what appears to be conflicting stuff going on. Here is an example of properties being tweened during the duration of a longer tween.

    See the Pen rNYprdo?editors=0010 by sgorneau (@sgorneau) on CodePen
  2. Shaun Gorneau's post in Pin element to the bottom of another element was marked as the answer   
    Hi @fionchadd,
    I don't see anything wrong with multiple triggers so long as, like your second example, you can wrap it in a loop to build it out for you. Your second example is very close, the only thing was you were not adding the necessary pixel offsets to the `start:` as you did in your first example. This should do it (plus it's a bit simplified).

    See the Pen WNXXKVY?editors=0010 by sgorneau (@sgorneau) on CodePen
    Hope this helps!
  3. Shaun Gorneau's post in move in image from bottom was marked as the answer   
    Hi @initium,
    Moving an image from the bottom can be handled by translating the image on the Y axis from either
    off below (meaning the height of the viewable area) the viewable area to 0 or on the viewable area (0) to off the top (minus the height of the viewable area).  
    Here is a verbose example to show you what I mean.

    See the Pen oNoodpo?editors=0010 by sgorneau (@sgorneau) on CodePen
    In a practical execution you'd want to compute things like the viewable area height and wrap the timeline buildout in logic to accommodate any number of slides and any variation on height/width.
    Hope this helps!
  4. Shaun Gorneau's post in Tween Y an element and resize it's container was marked as the answer   
    Hi @flefloch,
    The reason for this is that CSS transforms do not disrupt flow. The parent element still sees it in its original position and behaves accordingly  So, there are a few ways you could handle this.
    You could change the element's position property to absolute after the tween, that way the parent is sized based on the new flow.

    See the Pen OJgXqLM by sgorneau (@sgorneau) on CodePen
    Or you could tween the parent's size (depending on how dynamic this scenario is).

    See the Pen powbYzr by sgorneau (@sgorneau) on CodePen
    There are certainly other ways to handle this depending on the complexity of the overall scenario.
    Hope this helps!
  5. Shaun Gorneau's post in Create a pause after Scrolltrigger animation was marked as the answer   
    Hi @Alexander S.,
    One way you can achieve this is to move from a tween to a timeline and allow scrollTrigger to control the timeline. Then, you can tack on an empty tween with a relative position to achieve the "pause" ... which is really just a tween affecting/doing nothing for a specified amount of time.

    See the Pen KKWNvaL?editors=0010 by sgorneau (@sgorneau) on CodePen
    Hope this helps!
  6. Shaun Gorneau's post in Adding a class to an object at a specific point in a timeline was marked as the answer   
    You can accomplish this with GSAP alone (which I would recommend) by pulling that tween out of the timeline and making a call to a separate tween at that point of the timeline (with a conditional check to see if it's already been called).

    See the Pen wvJovBd?editors=0010 by sgorneau (@sgorneau) on CodePen
  7. Shaun Gorneau's post in Pinned layered divs with smooth ScrollTo was marked as the answer   
    Hi @scavaliere,
    Two quick things.
    You can't start an id with a digit, it must start with [A-Za-z] Before scrollTo can do its thing in response to clicking on an anchor, you must first prevent the default behavior (which is to jump to the position of an element with a matching name or id)
    See the Pen BapbRXv by sgorneau (@sgorneau) on CodePen
    Hope this helps!
  8. Shaun Gorneau's post in Section counter was marked as the answer   
    Hi @Kelimino,
    A few things that stand out to me are 
    You're recreating the timeline multiple times rather than adding tweens (or other timelines) to it While call() would work here on appending tweens/timelines, you are appending it to a single timeline each time that timeline is recreated Unrelated to the issue; if you define a from() tween, it will perform that tween from the defined property values to the element's current values, so you don't need to follow up with a to() tween ... unless your defined end target values that are not the values in place before the from() is called. I think an easier way to handle this would be with ScrollTrigger.create() and not make use of any timelines (along with not worrying about defining any toggleActions). I think it's easier to use the callbacks onEnter and onEnterBack to update the counter and perform a simple tween on it.
    Also, adding end points gives you better control over when to trigger onEnterBack for better usability. Without defining them here, onEnterBack into slide 1 would not be triggered because the scroll can't reach the trigger point.
    Have a look here,

    See the Pen KKaEgvZ?editors=0010 by sgorneau (@sgorneau) on CodePen
    Hope this helps!
  9. Shaun Gorneau's post in Pinned overlayed animations on scroll was marked as the answer   
    Hi @scavaliere,
    A few quick things I notice (in general) that you'll want to fix up ... 
    autoAlpha (as all properties are) is case sensitive. I notice your were typing `autoalpha` opacity is affected by autoAlpha, so you should not define values for both properties you mixed gsap and TweenMax. TweenMax is old syntax, you should only use gsap.method() Now, for your specific issue, because you're wanting to establish some sequencing, you should use a timeline rather than a simple tween. Have a look here,

    See the Pen XWpoqwJ?editors=1010 by sgorneau (@sgorneau) on CodePen
    Hope this helps!
  10. Shaun Gorneau's post in Illustrator SVG change fill opacity using gsap was marked as the answer   
    Hi @Sam Smith,
    There are two was you can tackle this ... each affect it differently. If you want to change the opacity of the star, you could tween the opacity of the element that has the star.svg assigned as a background (just as you would for any element with an image as a background).
    But, I think you want to affect a specific attribute of the SVG, not the element presenting the SVG itself. For that, the SVG needs to be in the markup to be accessed like any other DOM element.

    See the Pen rNjoWKj by sgorneau (@sgorneau) on CodePen
  11. Shaun Gorneau's post in Border Animation... was marked as the answer   
    Hi @Conill Blanc and welcome to the forums!
    If I understand correctly, I think what you're looking for is to sequentially tween 4 elements; the image, a blue border, a magenta border, and a yellow border. Something like this,

    See the Pen JjERyYg by sgorneau (@sgorneau) on CodePen
  12. Shaun Gorneau's post in Opacity remains zero was marked as the answer   
    Hi @Paz,
    This is a combination of some initial values, set()s, to()s and from()s; they can come together to create unexpected results because some values are applied before the tween begins. I find in cases with several tweens in a timeline, it's best to use set() up front to establish inital property values, and then use to()s from there. Have a look,

    See the Pen bGgmqmJ?editors=0010 by sgorneau (@sgorneau) on CodePen
  13. Shaun Gorneau's post in Simple, "plug-in" reveal tween setup — best method? was marked as the answer   
    Hi @Whitfield,
    You certainly can do it with a clip-mask ...

    See the Pen GRrXVZx?editors=0110 by sgorneau (@sgorneau) on CodePen
    But, I like the control that is afforded by animating a parent container within a wrapper, especially when it comes to tweening other properties at the same time. What's the reason you are hoping to move away from a wrapper? Is it the extra markup? If that's the case, you can have Javascript create the wrapper, that way your markup stays lean/focused.
  14. Shaun Gorneau's post in Need help with loader animation... was marked as the answer   
    @AlexN welcome to GSAP!
    The trick here is to yoyo each individual stagger tween but repeat the overall "to" tween (not the stagger). The other little tidbit is that yoyo only works if there is a repeat value greater than 0. So repeat -1, 0, or no value will not produce the yoyo. Putting repeat: 1 within the stagger will take care of that. Have a look here,

    See the Pen abpmqjw by sgorneau (@sgorneau) on CodePen
  15. 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
  16. 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
  17. 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
  18. 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?
  19. 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
  20. 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
  21. 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
  22. 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.
  23. 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.
  24. 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
  25. 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/