Jump to content

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

akapowl last won the day on April 19

akapowl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by akapowl

  1. Yeah, it's pretty hard to help you here, because your demo doesn't even have text in it. So there's no way we could know, how to do what when, to help you here. Maybe this modified pen of yours here can serve as inspiration, too. Happy scrolling. https://codepen.io/akapowl/pen/b2d9635c48660f38f0d299f825b635e8 Another thing, I just noticed (that I missed the last time around) is that you put ScrollTriggers on individual tweens of a timeline. You'd probably want to avoid that, as the article for the most common ScrollTrigger-mistak
  2. You also might be interested in a helpful effect, @GreenSock created in a different thread for scenarios as such, @Alex_JS
  3. Hey @daveodden - welcome to the forums. Those are close to 1000 lines of code to deal with. Usually debugging a whole live website is way out of scope for the forums, so please try to keep your demos minimal for the future. But since you already hinted to what might be the problem here, here's what seems to fix your issue for me: It looks like by creating your ScrollTriggers in that .forEach-loop you might be creating them out of order of appearance on the page. I added a refreshPriority: 1 to that pinning ScrollTrigger you mentioned and it now seems to
  4. Hey @IbraheemHaseeb You are actually making one of the most common ScrollTrigger-mistakes, creating .to() logic issues. Easy fix here: set immediateRender: false on your second .to()-tween. Or follow any of the other suggestions in the article linked above. I modified your pen a bit to better demonstrate it working now. Welcome to the forums https://codepen.io/akapowl/pen/253f951a6ea342d99ef605f7f377eb5e
  5. You could use a simple pinning ScrollTrigger for that and set pinSpacing to false. https://codepen.io/akapowl/pen/84de2a127e5a7615cca425d9b83fbf8d
  6. Hey @muzkore, welcome to the forums. You might want to take a look at the ScrollTrigger-Plugin which makes things like these a breeze. This thread here contains two different ways for something like what you want (one working with the color values in data-attributes and one with classes) For your specific example that could look something like this https://codepen.io/akapowl/pen/47f5941e575ae1f6e7fdc5e683926565
  7. You can use the endTrigger property for those kind of scenarios. endTrigger String | Element - The element (or selector text for the element) whose position in the normal document flow is used for calculating where the ScrollTrigger ends. You don't need to define an endTrigger unless it's DIFFERENT than the trigger element because that's the default. From the docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger Following examples uses the first cirlce as the trigger-element (when it comes into view) and the third circle as the end
  8. Actually just about all my pens are set to private by now. In those posts, where I have pasted the private link, the pens still show up alright. In those posts where I had initially pasted the public link (and for which I had the pen set to private in hindsight) the pens don't show up anymore. When I did change the pens to private though, I triple-checked that they were still being shown in all those posts - and they were, even with the old link to the public pen, so I went on and made all my pens private - now that seems to backfire. Interestingly enou
  9. I just realized, that just about all of my pens in older posts of mine are not being shown anymore (404 message instead). That is probably related to me setting them to private on codepen in hindsight - but when I did that, I made sure, that they were still being shown in the forum threads even with the old public links - now they are not being shown anymore. I don't know if this is related to changes codepen has made in their codebase, too. Am I supposed to put them all back to public again now? 😩
  10. Hey there, @slebbo You could give your ScrollTrigger an ID ScrollTrigger.create({ ... id: 'this-trigger-id', ... }) and when wanting to kill that one special instance only, do it like so ScrollTrigger.getById("this-trigger-id").kill() Clicking the body will trigger the killing here https://codepen.io/akapowl/pen/1aaa44829a660a1fb77bc3139ec88af5
  11. Hello there @Alexander K and welcome to the forums. When it comes to this, you might be at least doing one of the most common ScrollTrigger mistakes here, creating .to() logic issues. As the linked article suggests, [t]o work around this either use set immediateRender: false ([...]) or use .fromTo()s for the later tweens ([...]) or set a ScrollTrigger on a timeline and put the tweens in that timelines instead ([...]). Personally I would in most cases opt for the .fromTo() version for something like this (or depending on the usecase the timeline), to have ful
  12. Here you go. This example makes use of a timeline and tweens on width and height instead of x and y https://codepen.io/akapowl/pen/11246dff1111c03bd97e6d26db190f25
  13. Welcome to the forums @Group of Oceninfo They are tweening the width of their .slide-1 (that probably overlays the image on the z-axis and is aligned right) to 0 initially. Then they tween the height of their #introduction to 0. You could do both those tweens sequenced within a simple timeline. I would recommend using the newer GSAP 3 instead of the old TweenMax though. Give it a shot and let us know if you run into any GSAP related issues along the way.
  14. Hey @smokeNinja - welcome to the forums. To me it looks like codepen has some problems because the external CSS from a different pen that is linked to in the CSS-settings is simply just not being loaded. If you include it in the codepen itself it works as before. https://codepen.io/akapowl/pen/cfba359300b1ff1d9b3ad70c1ac2c5d2
  15. That is just the initial tween from the ground into the spiral. It's not part of the timeline because I repeat the timeline infinitely from the spiral part in that example. I wouldn't give too much attention to that. Don't forget to set your alignOrigin though, so your kite aligns to the spiral nicely. https://codepen.io/akapowl/pen/6791290a4984c8fc3fb422bb4bd0ba5c
  16. I've had that happen with Inkscape. Maybe you just need to set your viewbox / file-dimensions straight ( File > Document Settings - In there there should be a box with your file's dimensions and one with scale. Make sure to set your file's dimensions AND viewBox to the dimensions of the container in your HTML and the Scaling to 1 - I hope that makes sense, because I am actually using Inkscape in German localization ) As already mentioned just drawing out the paths in a vector editor would probably be the easiest way for this to work properly. All these paths here have been m
  17. Hello @Wemnia If I am getting you right, the 'delay' you are experiencing is actually not caused by the delay property of the tween but by the duration of the tween. If you change the duration of that tween to 0.0 (it has a default duration of 0.5), you will see there will only be a very minimal delay (which is probably just inevitable due to the reaction-time of the code or something). Instead of a .to() tween with a duration of 0 you could also just use .set() there. And if performance-wise you wanted to go for the absolute best approach, you might want t
  18. Good job With the afore-mentioned if statement you could spare some code, though. Maybe something like this if(e.target.getAttribute("href").slice(9) === 'inner') { containerOffset = panelsSection.offsetTop + targetElem.parentElement.offsetLeft + targetElem.offsetLeft; } else { containerOffset = panelsSection.offsetTop + targetElem.offsetLeft - 10; } or use a ternary operator for that const containerOffset = e.target.getAttribute("href").slice(9) === 'inner' ? panelsSection.offsetTop + targetElem.parentEle
  19. The logic for the scrollTo is not built for respecting child-elements of the panels but only the panels themselves so far, so you'd have to incorporate some logic that would respect that. You could e.g. set up an if statement in which you check wether the e.target.getAttribute("href") has "inner" at its end. If it does, set the containerOffset to the panel's offsetTop plus the targetElement's offsetLeft plus the targetElement's parent's offsetLeft (because for that case, your targetElement is not the panel itself anymor but the pannel's inner). Else, use the
  20. Yep, you could, but I didn't suggest that because it only works for when that first section is in view on load and RichSock wanted it to work for whatever section is in view on (re)load.
  21. Welcome to the forums @RichSock I'm not sure if I missed something totally obvious, but if I did, I'm sure someone will come around and correct me. I don't think there is an integrated method in ScrollTrigger that would let you do that just like that. But you could always check whatever element you want to animate is in view currently with a simple helper function like covered here and not create a ScrollTrigger for that element in view. That could then look something like this. https://codepen.io/akapowl/pen/bb6edc7f1c3918d3c44570032de18ca5
  22. Hey @Perdixo75 That is really more of a general JS and barba-related question and usually these forums try to stay focussed on things that are directly related to GSAP. What you would have to do before animating is checking for which of the elements that you want to animate are in view currently - for example with a helper function similar to the one explained here That could then look something like this https://codepen.io/akapowl/pen/5d29bd576ad634a694103346560caf3c Of course you would have to tweek it to your liking, because
  23. The first parameter of start and end always refers to the trigger-element and the second parameter always refers to the viewport. So if you want it to have full opacity once its top reaches the top of the viewport you'd set the end to 'top top'. As strings you can use keywords like "top", "bottom", "center" (or "left" and "right" if horizontal: true) or percentages like "80%" or pixel values like "100px". You can also use numbers for exact scroll values and functions too, if you like. For more information about all that please see 'start' and 'end' under Usage & special p
  24. Welcome to the forum @Christiemade That sounds like what you want to have a look at are the start and end of a ScrollTrigger in combination with a scrub. Those are the values that define the duration of scroll over which the animation is being scrubbed through. This part of the docs might also be of interest for you here: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub In following example the trigger is set to that element, wih a start of 'top bottom' which also is the default for not-pinning ScrollTriggers (when the element's top hits t