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 

Posts posted by Shaun Gorneau

    Structuring massive HTML?

    in GSAP

    Posted

    I think maybe you're conflating two separate ideologies, but that is understandable.

     

    GSAP, at its core, is made to tween element property values (e.g. x, y, opacity, rotation, scale, etc.)  between numerical values, and to manage sequences of tweens. That's sounds simple, but it's powerful! In essence, it can bring a web page to life; any/all of its elements at defined and calculated times, and at defined and calculated locations ... based on user interaction or all on its own.

     

    You can use GSAP (to tween out current page elements) in combination with your own custom JS to load remote page content, swap it in to the current page, change the browser's URL, and then again use GSAP to tween in the new elements. Or an logical sequence of tween current out, remote load, tween new in; e.g. load remote content into a local container and do simultaneous tween out/in.

     

    Barba.js is made to handle the transition states from one page to the other without a page reload in combination with an animation library ... for which I would highly recommend GSAP! ;) 

     

    From the Barba.js Docs

     

    Animation

    The important part for a good transition is animation. As Barba is not an animation library, you will need to import one in order to animate elements on the interface to create your transition.

     

     

    Have a look at the Barba.js docs, I think it's exactly what you're looking for.

     

    Shaun

     

     

     

    • Like 3
    • Thanks 1

    Draggable, programmatically "drag" to a position

    in GSAP

    Posted

    So, I'm using Draggable to move around a map that is larger than the viewport and bound to a container. That works perfectly. I have hotspots on the map that reveal info cards. When I click a hotspot, I would like to programmatically perform a drag as if I manually dragged the map from the "mousedown point" to the center of the screen. 

     

    .to() works fine but doesn't respect the Draggable bounds (for obvious reasons). Is there a way to pass coordinates to a Draggable method such that it respects everything about the Draggable instance (bounds, inertia, etc.)?

     

    Thanks Superheros!

    Continuous news ticker From RIGHT to LEFT

    in GSAP

    Posted

    Hi @noesiscsd,

     

    The problem I see here is that two tweens are fighting. Because you've already offset the content that needs to move from "off canvas" to the left, you only have to move it to 0, and then repeat that process. Because we're using a set() here ( rather than a fromTo() ), you'll want to repeat the timeline, not just the tween. Also, due to margins and padding, there is a skip ... so I added a buffer to the x value.

     

    See the Pen VwrVPbj?editors=0010 by sgorneau (@sgorneau) on CodePen

     

    Hope this helps!

     

    Shaun

    • Like 1

    Pin element to the bottom of another element

    in GSAP

    Posted

    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!

     

    Shaun

    • Like 4

    move in image from bottom

    in GSAP

    Posted

    Hi @initium,

     

    Moving an image from the bottom can be handled by translating the image on the Y axis from either

     

    1. off below (meaning the height of the viewable area) the viewable area to 0 or
    2. 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!

     

    Shaun

     

     

    • Like 4

    Animate 3 boxes in a row with Scroll Trigger

    in GSAP

    Posted

    Hi @Christiemade,

     

    The thing that stands out the most to me is that you're tying the tween to `scrub`, meaning it takes scrolling to progress the tween. If you just want them to appear, you can remove that. Also, you don't have to define each tween separately since they share the same selector and are tweening the same properties. You can offset them with a stagger. Have a look,

     

    See the Pen abVVowa?editors=0010 by sgorneau (@sgorneau) on CodePen

     

    Lastly, if you're going to tween a property that you've defined in CSS (opacity in this case), it's best to pull that out of CSS and either use a set() or fromTo() in GSAP. This is especially true for transforms. And, while opacity is certainly valid, it's best to use the GSAP special property "autoAlpha" as it handles both opacity and visibility.

     

    Hope this helps!

     

    Shaun

     

     

    • Like 3

    Tween Y an element and resize it's container

    in GSAP

    Posted

    22 minutes ago, flefloch said:

    Just one question : What is the 0 value you add at the end of your tween?

     

    It's the position parameter. It tells the tween when to happen in the overall timeline ... absolute timing in terms of seconds from the beginning, at a defined label,  or relatively from the previous tween (amongst other things). Have a look here,

     

     

     

    Note, I used a timeline with the idea that you would have a lot more happening that might require sequencing. This could be done with two separate tweens which would not require any positioning since simple tweens aren't sequenced in any way.

     

    See the Pen rNwLbOE by sgorneau (@sgorneau) on CodePen

    • Like 2

    Tween Y an element and resize it's container

    in GSAP

    Posted

    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!

     

    Shaun

    • Like 2
    • Thanks 1
1
2
3
...
33
Page 1 of 33  
×
×
  • Create New...