Jump to content

Visual-Q last won the day on April 3 2021

Visual-Q had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by Visual-Q

  1. Hey Beka,


    Welcome to the forum. You could achieve these effects using a combination of 3d transforms as explained in the CSS Plugin docs:



    and using 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.😐


    • Like 2
  2. I'm not sure I fully understand what you're after but I think you want something like this in the t12 timeline:


      .set(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 0 })
      .to(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 1 })


  3. Hey Ak, unless I'm missing something I think you are indeed comparing Apples to Green Socks. The link example you give actually scrubs through a sequence of images like a video, not really parallax.


    These threads might help point you in the right direction, search the forum there might be some others.




    • Like 3
  4. Hi Maelle,


    Welcome to the forum, building out custom examples for requests is a bit beyond the scope of the forum but of course anyone is welcome to assist with that if they want to.


    It sounds like you've already made a start, so if you can create a codepen of where you're at it would help a lot.


    I'm not a Vue guy so someone else would have to advise about that. As far as the parallax goes the best place to start is probably just to create a timeline animating the elements and adjust the speed of the elements till the timing of everything looks good. Then you'll want to explore controlling it with scrollTrigger likely using a combination of pinning and scrubbing.


    Hope that helps point you in the right direction.




    • Like 3
  5. 12 hours ago, Rajan said:

    May be  similiar to pricing page in any other website we see, that would be more easy to find. 


    I think I'd have to agree with this, I know myself I have to evaluate a lot of plugins in the wordpress work I do and the fist thing I look for is a pricing page to find out what's what. In virtually every such page I've seen there if there is a free option/version it is always highlighted.


    I might suggest going to four columns and adding a panel specifying that the core engine is free. As far as Club Greensock goes you could  preserve brand equity just fine and make it easier to understand if you just changed the menu link to Club GreenSock Pricing.

    • Like 2
    • Thanks 1
  6. I'm sure someone can come along to help you set this up better as I haven't had much time to spend with scrollTrigger yet but I think I can shed some light on what's happening, your start and end positions for the divsOne and divsTwo are in the same place and not accounting for the elements being in different positions, you can see this if you show markers on the divsTwo in your pen the starts and ends have already come and gone before the elements are even on the screen.


    In this pen I accounted for the divsTwo position after the first section's pin spacer. I don't say this is a good solution for this, just illustrating what's happening.

    var parentOffset = chOne.scrollWidth - document.documentElement.clientWidth + window.innerHeight;
    start: () => parentOffset + start + (elWidth * 0.5),
    end: () => parentOffset + start + (window.innerWidth),



    See the Pen poeLdRd by Visual-Q (@Visual-Q) on CodePen

    • Like 2
  7. I would think If the height is known at the start and it's a mobile device where you won't manually change screen size you could store it as a flag variable at the start and key the heights the elements to that value rather than a dynamic screen height. I think Jack alluded to that.


    One other idea is to calculate all height based on a ratio of screen width i.e. the vw unit. This is  great way to maintain the aspect ratio of elements. This won't scale dynamically to fit a screen height but it will retain the relative size and aspect ratio.


    This article might help too.



  8. I was referring to the codepen. 


    On your site:

    Re the video I'm a little confused what to you want it to be doing, currently it's sitting up at the top overlaying everything because you have position fixed on it. If you want the video to sit in its container try setting the video to:

    position: absolute

    and add to the row that contains it:

    position: relative


    At this point containing row with the absolute child element has no inherited height, if you want to set this and have video overflow hidden give it a height and set it's overflow properties accordingly. such as:


    height: 50vh;
    overflow: hidden;


    Then I suppose you'll have to adjust how you have the scrollTrigger setup to make it react at the appropriate time. 



    • Like 2
  9. I cranked up the value to 1 to see it better and it seemed smooth enough to me at least within the limits of a normal wheel scroll, the only thing I can think of to smooth it out more would be a smooth scroller on the page.


    Are you seeing substantial jank in the parallax itself or just talking about the page scroll with a mouse wheel?

    • Like 1

    1 hour ago, PointC said:

    For stuff like that I usually just clone the node and animate them both to an xPercent of -100. This is a demo from another thread, but shows the same basic idea. It just has a hover speed/slow effect.


    Such a simple way to create a looping Carousel. Thanks for posting that Craig, I missed it the first time around.



    • Like 2
  11. I bumped you...


    Note it helps a lot if you simplify things and explain how it works. It's a bit much to expect people to first figure out how your project works in order to help you.


    I'm not sure what the issue is but if anyone wants to take a run at this the code you need to pay attention is at the end, it animates a fromTo of innerhml between two supplied values.


    Onupdate it formats the value presented in the innerHTML using the functions at the end.


    To make it work shift the semester hours right to a value in and select an option  above and it counts out values,  if the starting value is in the thousands has an "," the formatted numbers restart from O. You can see in the unformatted values that it counts accurately between the supplied values so something in the formatted return is causing gsap to count from 0 instead.


    Clear as mud.


    See the Pen NWdbpww by Visual-Q (@Visual-Q) on CodePen


    • Like 1