Jump to content
Search Community

rm2773

Premium

  • Posts

    6

  • Joined

  • Last visited

 Content Type 

Posts posted by rm2773

    Two-Column ScrollTrigger (Sticky) with Zoom-Out and Reveal

    in GSAP

    Posted

    I'm confused as to how to reveal the green shaded area at the end of the timeline.  I'm not exactly sure how to layer-in another image reveal efficiently while all the other animations are happening; or at very least, I'm not sure of the best approach for doing so.  Like should I use a single SVG and reveal the green area?  Or use two images and fade one in?

     

    I understand what you mean with multiple scrollTrigger instances, and will definitely re-factor that code - thanks for the suggestion.

    Two-Column ScrollTrigger (Sticky) with Zoom-Out and Reveal

    in GSAP

    Posted

    Hi everyone!  I apologize in advance for the incomplete Codepen, but I think it demonstrates what I want to do.   

     

    My example shows a map section (position:sticky) that is 6 x 6 columns, with an image on left and content on right.

     

    I'm wanting to achieve the following sequence of animations:

     

    1) User scrolls down the page until they arrive at the Map section, which becomes "sticky".

    2) Map section displays the SVG without the green color, and the animation begins (Codepen currently shows green visible at all times).

    3) The user scrolls.... and map rotates and zooms out simultaneously, while also being unmasked by a rectangle shape

    4) Once the 3rd content section becomes visible, I want the rotation to end, and finally the animation will reveal the green shaded area, from left to right.

    5) By this time along with #4 above, the entire SVG should display behind both columns.

    6) All animations mentioned above should be fully complete by the time the user scrolls out of the section

     

    I love GSAP and I really appreciate the great talent in these forums....I'm a Shockingly Green member and having the extra plugins available to members, is surely worth it.  

     

    Thanks in advance! Rob

     

     

    See the Pen PodbxKx by rm2773 (@rm2773) on CodePen

    Easing problem

    in GSAP

    Posted

    On 7/2/2019 at 9:09 AM, mikel said:

    Hi @Alexandra Spalato,

     

    Probably there is a conflict with the css animation for the buttons

      

    
.button {
  display: inline-block;
  padding: 15px 15px;
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
  -webkit-transition: all 0.4s ease-in-out;   /// !!!!
  transition: all 0.4s ease-in-out;    ///  !!!!
  font-family: 'Avenir';
  font-weight: 500;
  font-size: 1.4rem;
  font-size: 1.6rem;
  color: #ffeae1;
  text-transform: uppercase;
  border-radius: 4px;
  border-bottom: 5px solid;
  letter-spacing: 2.4px; }

     

    Kind regards

    Mikel

     

     

     

    This CSS conflict was causing issues for me on another project - I just stumbled across this post and found my problem!  Thanks!

    • Like 1

    Scrolltrigger zoom through element and then scroll

    in GSAP

    Posted

    On 3/26/2021 at 12:03 PM, akapowl said:

     

     

    Hello @seanom

     

    Using a timeline certainly is the best way to approach this - but with your approach you are actually making one of the most common ScrollTrigger mistakes; nesting ScrollTriggers inside multiple timeline-tweens. You'd want to avoid that and instead set up the scrollTrigger on the timeline itself.

     

     

    You can use the position parameter of the timeline (more info on that right below the video on the linked docs-page) to properly adjust the timing for the individual tweens of yout timeline. But be aware, that durations and the position parameter on ScrollTrigger-tweens and -timelines with a scrub applied do work quite different from those on regular tweens/timelines.

     

     

     

    As for the mask-reveal:

    @OSUblake made an awesome demo that shows how such a cirlce mask-reveal can be achieved - responsive to resizes and everything included.

     

     

     

     

     

    I went ahead and adjusted it a bit so it fits the scenario you described - so you could take this as inspiration for how to achieve your goal.

    For the image to remain in place on further scrolling ( in this special scenario ) I found it would be easiest to just have it positioned fixed outside of any section and hidden initially and then simply tween its opacity to 1 when the time has come. Depending on the exact outcome you want for this later on scrolling it might be better to do things differently though.

     

     

     

     

     

    Hope this was a bit helpful. Happy tinkering, scrolling and tweening :) 

     

     

    Edit:

    Because of the image being positioned fixed in the above approach this would of course not work with the image being initially visible through that hole in the black section, so here is a different approach with one image fixed and one absolute inside the section and a switch of opacity between those at the end of the scrubbing timeline ( will lead to a nasty jump with a numerical scrub-value though so the scrub is set to true ). Maybe somebody else has a simpler approach to that.

     

     

     

     

     

    Hi, great job on this image reveal sample.  Would someone be willing to show this reveal with a rectangular reveal shape, versus the circle shape?

×
×
  • Create New...