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

Everything 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: 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. I believe removing the parenthesis will prevent the middle function from being invoked immediately. You also have some scoping issues, so something like this might point you in the right direction: https://codepen.io/Visual-Q/pen/RwVLmBJ
  3. Visual-Q

    autoAlpha issues

    I'm not sure I fully understand what you're after but I think you want something like this in the t12 timeline: tl2 .set(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 0 }) .to(["#tile6-2", "#tile4-2", "#tile8-2"], { autoAlpha: 1 })
  4. You can do something like this, if you don't want css transitions you can replace them with gsap animations the principle is the same either way. https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
  5. Hey Hardya, Check out the new install page https://greensock.com/docs/v3/Installation#CDN I believe tweenLite/max and the others are combined into a single core build which is just gsap now.
  6. I'm not too familiar with particle animation but maybe these libraries would be useful: Particle js looks interesting. https://vincentgarreau.com/particles.js/ and I think threejs has particle systems as well: https://threejs.org
  7. And have a look at this pen for a smooth scrolling solution together with scrollTrigger https://codepen.io/GreenSock/pen/gOgWELo
  8. @PointC has a very simple solution for this that clones and loops an element. The example shows text scrolling horizontally but you should be able to set it up to scroll vertically with an image. https://codepen.io/PointC/pen/ExgExxL
  9. 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.
  10. 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.
  11. 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.
  12. 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), https://codepen.io/Visual-Q/pen/poeLdRd
  13. Check out this post @PointC has a very clever implementation of a similar infinite scroll using cloned node.
  14. 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. https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
  15. Have you looked at the docs page for this: https://greensock.com/docs/v3/GSAP/gsap.ticker There is really good video about how it works and a lot of information about the ticker. From the docks it looks like lagsmoothing is a method on the ticker (global timeline) not on individual timelines though maybe there are other implementations I'm not sure.
  16. 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.
  17. 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?
  18. Visual-Q

    Learning

    Good job @jnutt367 keep at it you'll be a pro in no time! And welcome to the forum.
  19. Hi nurlan, Welcome to the forum, if possible please make a simplified example of the issue on codepen so we can have a look. It's very difficult to troubleshoot a live website.
  20. Check the console... 404 error on the video (Failed to load resource: the server responded with a status of 404 () } and I don't think you have gsap loaded (Uncaught ReferenceError: gsap is not defined)
  21. Query 2: I'm not sure if there is any more updated info but this post contains info on using with dynamic content:
  22. Such a simple way to create a looping Carousel. Thanks for posting that Craig, I missed it the first time around.
  23. 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. https://codepen.io/Visual-Q/pen/NWdbpww
×
×
  • Create New...