Jump to content

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

akapowl last won the day on October 17

akapowl had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


akapowl last won the day on October 17

akapowl had the most liked content!

About akapowl

Profile Information

  • Location

Recent Profile Visitors

4,159 profile views

akapowl's Achievements

  1. Hello @chintan w3nuts - welcome to the forums. I am not sure I understand what exactly it is you are asking about, but you might want to take a look at the smoothScroll() example in the .scrollerProxy() docs - it is a bit newer than the approach above and takes care of some more things, like trouble-free pinning. Hope it helps. https://codepen.io/GreenSock/pen/gOgWELo
  2. Hey @dr.Pxl Try adding invalidateOnRefresh: true to your ScrollTrigger - that should do the trick. From the ScrollTrigger documentation: invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. https://codepen.io/akapowl/pen/2827a530689a5a53049cc37b058956ab
  3. I fiddled around with it a bit and found it worked best to tween on / set the groups instead of the paths - just had to make sure every group inside the #bounce had a background rect - as i found it worked this way, I didn't look further if there was a better solution - but it works and looks quite easy. https://codepen.io/akapowl/pen/a3134b964c569b9fffead620eb78cec7
  4. Looks like you could do that... https://codepen.io/akapowl/pen/828080bdab8763ab9ea4ef53c0aca3e4 ...you might just want to refresh your knowledge about CSS selectors & combinators a bit. .contents > * would actually select all elements that are direct children of .contents. What your probably looking for is contents + * https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors https://codepen.io/akapowl/pen/852325f2af19a0b2d7c3c3d76782ff2d But you could also just spare the endTrigger, leave it based on the trigger and adjust the end to when the bottom of that .contents section hits a certain spot up top. For more info please check the ScrollTrigger documentation. https://codepen.io/akapowl/pen/a2319cc25943f31832f2acf451596140
  5. Hello @flim Is there any particular reason you need the tween to be in the onEnter callback? If you need to stick to the .create() method (vs adding a scrollTrigger to that tween itself - the commented out part in below example) you could just hook up a tweeen or timeline via ScrollTrigger's animation property. https://codepen.io/akapowl/pen/00ec094aec7abe63df27789734f88186
  6. Hello @flim That's quite testable - short answer: it does aso work on scrollTrigger inside a gsap.to() Click the body to change the height of the .bg in this following example and see how the markers adjust because of the .refresh() that is being called. https://codepen.io/akapowl/pen/16cfd8e6cedfd6ef69c32da5664e1895
  7. Hello @jenda In that case you could just set up an extra ScrollTrigger for the pinning of the "19" with an endTrigger set alongside of the end to easily tell where it is supposed to stop pinning, and let the ScrollTriggers within the loop handle the rest. The pen below shows how you you handle the ScrollTriggers in the loop it 'timingwise', dependent on the height of each .content You can certainly do that in the onLeave callback as to be seen in the pen below - but don't forget do fade them back in onEnterBack. Happy scrolling! https://codepen.io/akapowl/pen/c5c949193e94621afc717cbce169bc96
  8. Hello @AnimatiCSS Unfortunately, ScrollTrigger's pinning will not work with sections that have locomotive-scroll's data-scroll-section attribute, as when using that data-attribute, locomotive-scroll will work its translates for the smooth-scrolling on those sections and thus will inevitably tell those sections to keep on moving/translating, so there will be conflicting behaviour between locomotive-scroll and ScrollTrigger, that ScrollTrigger can not do much about.
  9. Welcome to the forums @JJulien It seems to work quite alright if you insert "auto" for the height-property to tween to. I would probably stick with the .to() route here, as .from() will tween .from() the values you feed the tween with [ to the values you initially set there via CSS ] and for one you would probably have to use .to()-tweens anyway at some point and working with.from() tweens can become a bit puzzling in a scenario as such (well, at least for me it does). Some other notes: I would wrap the whole thing up in a load-event function to make sure your images are actually loaded when you set things up and the height of the images can be respected correctly. I also changed the height in the CSS on your #expanded-menu to 0 instead of 0% - because those 0% actually didn't do anything Hope that'll help a bit. https://codepen.io/akapowl/pen/5bdefaf964844e6a7bd3ba12d6d2ac95
  10. Hello @ttiimmaacc GSAP's ScrollTrigger is a super powerful tool to do things like these. It might really help you with this. Here is what your example could look like ( I just pushed the start and end away from the edges of the window for better visualization). https://codepen.io/akapowl/pen/b01fd41c0a80f02caa7803c413c41e37 Since version 3.8.0 ScrollTrigger also comes with a .isInViewport helper function - which for your needs in this case shoudln't really be neccessary though. Before taking a deeper dive into the documentation, I would suggest checking out the getting started article:
  11. akapowl

    Simple Animation

    I think, I already did.
  12. akapowl

    Simple Animation

    Sorry, I don't understand what it is you mean by last section overlap, since you don't seem to be doing something with resemblane to the original example you posted - and also what you are doing seems to be working alright by now? One thing I did notice is that you are again creating ScrollTriggers out of order of appearance on your page - the ScrollTriggers on the .left-scroll and .right-scroll will not be positioned correctly as they can not know about the pin-spacing you have on the scrollAnim1-timeline's ScrollTrigger.
  13. Hello @Juku123 You will have to incorporate a similar logic to the end and start of the individual ScrollTriggers as is used for the x-property of the fake-horizontal tween. When you horizontal section moves to the left, the left side (0% of the element) will be the nearest to the center so then you'd want its start to be "0% 50%" and its end to be when the side that is further away (100% of the element) hitse the center, so "100% 50%". When your horizontal section moves the other way though, so to the right, the nearest side of each element will be the right side (so 100% of the element) and the side that is further away being the left (so 0% of the element) - making the start and end exactly the opposite of when your horizontal section moves to the left. This is how you could implement that logic above with ternary operators; hope it helps. ... // Add class to active item // ========================= sections.forEach((sct, i) => { ScrollTrigger.create({ trigger: sct, containerAnimation: scrollTween, start: thisAnimWrap.classList.contains('to-right') ? "100% 50%" : "0% 50%", end: thisAnimWrap.classList.contains('to-right') ? "0% 50%" : "100% 50%", toggleClass: { targets: sct, className: "active" }, // markers: true }); }); https://codepen.io/akapowl/pen/7310d420d471b75bb9ed61a6b395fae1
  14. akapowl

    Simple Animation

    My pen above pretty much (except for the additional pinning and different start/end) does what's happening to the image of the two women in the example you posted above. Maybe you didn't see the correct one, because I first posted a link to the wrong pen. As @GreenSock already mentioned, please note, that these forums are not intended to provide free "build-to-order" solutions (please read the forum guidelines). First and foremost these forums offer support with GSAP specific questions. If you have trouble getting an effect done as you wish (which is not what these forums are there for in the first place), please provide a minimal demo of what you have tried so far and explain in a bit more detail what you want to happen and you will drastically increase your chances of gettig a solid answer. Thanks.
  15. akapowl

    Simple Animation

    Something like this could work https://codepen.io/akapowl/pen/ce0a6d86d70e4c3a5dfc31df1463f143