Jump to content
Search Community

Visual-Q last won the day on April 3 2021

Visual-Q had the most liked content!

Visual-Q

Moderators

  • Posts

    503

  • Joined

  • Last visited

  • Days Won

    4

Community Answers

  1. Visual-Q test
    Visual-Q's post in animate elements with matrix3d was marked as the answer   
    Hey Beka,
     
    Welcome to the forum. You could achieve these effects using a combination of 3d transforms as explained in the CSS Plugin docs:
    https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin
     
    and using ScrollTrigger
    https://greensock.com/docs/v3/Plugins/ScrollTrigger
     
    If you're new to GSAP you may want to check out the getting started section to begin with:
     
    If you had code you need assistance with please make a codepen so we can see what's up.😐
     
  2. Visual-Q test
    Visual-Q's post in Distribute width of SVG rectangles and getting them flush side-by-side was marked as the answer   
    You can do something like this but of course it's not actually distributing things like yours just overlaying them. Maybe Jack or someone will come along with some better advice. There's likely a better way to do it I'm not that familiar with this utility.
     

    See the Pen MWJezEQ by Visual-Q (@Visual-Q) on CodePen
  3. Visual-Q test
    Visual-Q's post in ScrollTrigger - Vertical centering of absolutely positioned content was marked as the answer   
    Does this do it, note as requested it starts to fade in when section 3 hits the middle however the box at that point is positioned in the center of that section which has only travelled halfway through the screen and therefore is at the bottom when it starts to become visible.

    See the Pen RwKWGgq by Visual-Q (@Visual-Q) on CodePen
  4. Visual-Q test
    Visual-Q's post in How to style.transform = translateZ(85px) was marked as the answer   
    Not sure what you are trying to achieve but this shows z axis movement on card 2 to point you in the right direction hopefully.
     
    You can find out more about how gsap handles transforms in the docs: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin
     

    See the Pen bGBYMYB by Visual-Q (@Visual-Q) on CodePen
  5. Visual-Q test
    Visual-Q's post in ho i can pin a sub element on scrolling was marked as the answer   
    I quite like that effect from the site you showed:
     
    https://www.ecwid.com/?fbclid=IwAR2ygAek1LtYvPiQbq2x8P9vOfmzGO4zKM8sQRNVySt29cSApJB2O71JtaY
     
    So I figured it was a good excuse to practice my ScrollTrigger and transform skills. Kind of finicky working out the css, there's a few different ways you coudl approach that. This seems to work pretty well.

    See the Pen RwadBgG by Visual-Q (@Visual-Q) on CodePen
  6. Visual-Q test
    Visual-Q's post in How to clear cached prop values and recalculate? was marked as the answer   
    Thanks Jack!!!
     
    Worked like a charm .
     
    Just added:
    jQuery( window ).resize(function() { newProd_tween.progress(1).invalidate(); }); And seems to work perfectly.
  7. Visual-Q test
    Visual-Q's post in Error on modifiers? was marked as the answer   
    Thanks PointC. I guess I should examine the docs first on things like this but the intro for 1.19.0 download at the bottom  just takes you direct to the TweenMax build  so I assumed it was included in the Max build.
  8. Visual-Q test
    Visual-Q's post in Set a vars value with a constraint? was marked as the answer   
    Wow. As you noted that proposal opens up a lot of possibilities,. It think it should definitely become part of the core.
     
    Thanks for the help! 
  9. Visual-Q test
    Visual-Q's post in Pass a function to onComplete with parameter without invoking it? was marked as the answer   
    Awesome, thanks guys.
     
    Exactly what I was looking for.
  10. Visual-Q test
    Visual-Q's post in progress call back reporting strange values? was marked as the answer   
    Thank you Carl!!
     
    I followed your advice stripped out the tweens till I isolated the problem. Huge DUH!! on my part I was missing a decimal - I had 125 instead .125 as a time offset on one of the tweens. Pretty dramatic difference. The animation it was attached to was very subtle so I wasn't noticing the problem.
     
    Only a couple of days in with Gsap but this platforms already blowing my mind. Need to keep a closer watch on my code though.
     
    Thanks again.
×
×
  • Create New...