Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Visual-Q last won the day on April 3

Visual-Q had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Visual-Q last won the day on April 3

Visual-Q had the most liked content!

1 Follower

About Visual-Q

Recent Profile Visitors

3,642 profile views

Visual-Q's Achievements

  1. 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
  2. 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 })
  3. 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
  4. 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.
  5. 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
  6. And have a look at this pen for a smooth scrolling solution together with scrollTrigger https://codepen.io/GreenSock/pen/gOgWELo
  7. @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
  8. 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.
  9. 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.
  10. 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.
  11. 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
  12. Check out this post @PointC has a very clever implementation of a similar infinite scroll using cloned node.
  13. 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/