Jump to content

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

akapowl last won the day on January 17

akapowl had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by akapowl

  1. For one, you forgot to load the ScrollTrigger js-file, so in your codepen it wouldn't work in the first place Another thing is, you are using toggleActions alongside scrubbing - which won't work together. You should only use either one of them. Since you spoke about 'controlling the speed of the animation in scroll', I suppose scrubbing is what you want to do. None of those elements, the tweens in your timeline refer to in the initial pen posted, are existant in your demo. Since there are quite a few of them (and in the initially linked pen to they also
  2. Hey @Ali Manuel It's actually hard to say without having any clue about your HTML structure and your CSS. But my guess would be, that the element you are pinning is not very high and thus your scrub is 'too fast'. In a setup like this you could probably just change your end to a value you'd like, like end: '+=3000px' for example and thus control the duration of the scrubbing tween ( which is the distance between the start and end ). But that's just guessing. If this doesn't work for you and you need a more thorough answ
  3. Yeah, I myself at first thought it actually wasn't. Before I copy pasted the text from the docs, I had written something in my own words along those lines. Only after posting my answer with the text replaced with the snippet from the docs, I realized in the docs it says that opacity is supposed to be respected by default. Adding the props in the second parameter does seem to work, but @GreenSock or @ZachSaucier would have to chip in to tell you why it doesn't by default - or why it might not be working in your case.
  4. Hey @MennoPP By default, Flip only concerns itself with transforms, width, height, and opacity. If you want your Flip animations to affect other CSS properties, you can define a configuration object as the second parameter with a comma-delimited list of props, like: (...in your case for the opacity) const state = Flip.getState(".cryptoIcon", {props: "opacity"}); https://greensock.com/docs/v3/Plugins/Flip/static.from() ... text above to be found under 'Usage' on that docs-page. https://codepen.io/akapowl/pen/8d1bf36f4041cb965a
  5. Hey @justanothergoonie Since you are not scrolling by using the browser's native horizontal scrolling behaviour here, but only 'faking' a horizontal scroll when scrolling vertically, your ScrollTrigger with horizontal set to true will not work as you probably expect. If you want to add animations to the individual sections/elements e.g. when they enter the viewport, you would have to do the calculations for when to trigger what, yourself. These threads here contain examples on how to do that. You could probably apply a similar concept to your example. T
  6. Drawing and scaling simultaneously on mobile and desktop for me 👍
  7. Interesting; On my Desktop PC I'm seeing the same as @PointC mentioned, but on mobile (Samsung Galaxy Note 10, Samsung Internet) the path is being drawn, but there is no scale animation 🤔
  8. That's why in my example, the end for the pinning ScrollTrigger is end: () => "+=" + ((images.length + 1) * window.innerHeight), The adding of 1 to the images.length is related to the animating of the images not starting at the same point as the pinning but one window-height later. Thus you would have to consider that for your pinning which you currently do not do in your example. You could also consider it to be end: () => "+=" + (images.length * window.innerHeight + window.innerHeight) instead.
  9. akapowl

    Peel Effect

    You're welcome Here is what I had come up with myself https://codepen.io/akapowl/pen/3e862dd71518b171c644ae0a0e57dd1e It's essentialy the same as your result - only real difference is, I use a nifty little trick I learned around the forums when I was getting started with GSAP myself. The timeline is being set to reversed initially and on mouseenter and mouseleave, the same function is called, that checks on the reversed state of the timeline. If it is in reversed state (which it now is because it is set to that state initially) it will b
  10. akapowl

    Peel Effect

    Good job!! I don't know why you put that tween on the h4 in your mouseleave there, but when I remove that, it's working just like in the demo you provided initially. Is it not for you? https://codepen.io/akapowl/pen/f76fa6864d79d897f01b2f2b57b6c880 I went ahead and made your targets a bit more specific (so you don't end up animating all h4s on your page for example) and removed those durations of .75, because you don't need them anymore since you have those in the defaults.
  11. akapowl

    Peel Effect

    Hey @jollygreen If you set the position parameter on each of the tweens in your timeline to 0 for example, you'll see it work pretty well on first mouseenter. I would take the setup of the timeline out of the mouseenter-event and set it up beforehand instead and also set the timeline to paused initially. const timeline = gsap.timeline({ paused: true }); Then on mouseenter, similar to what you do on mouseleave, you can just call timeline.play(); there. Your mouseleave-event actually does nothing though, because you have a typo in there: m
  12. Sure thing: https://greensock.com/docs/v3/GSAP/Tween/targets() You should also find it if you do a browser search in the general docs for a tween or use the sidepanel on the left for search
  13. Hey @mvaneijgen I don't know if you realized, but that function you have in the onUpdate in your pen doesn't work, even without the stagger. I assume this is what you intended? https://codepen.io/akapowl/pen/b2c2c56064274fd14620faa9d5537e40 A way to do this respecting the stagger is to create a stagger-object and put the onUpdate-function in that stagger-object, targetting each element to be staggered individually. Hope this helps. Cheers, Paul Just for reference, I'll link the old thr
  14. akapowl

    Peel Effect

    Hey @jollygreen Adapting that sort of effect should be pretty straight forward and cases like this one are actually great opportunities to learn how to handle GSAP and the JS that would be required to trigger that effect. For the hovering you would need some eventlisteners - mouseenter and mouseleave - to trigger a change on the playstate of the animation. You could for example set up a timeline that is paused initially and on mouseenter trigger it to play - on mouseleave trigger it to be reversed. Getting to what to do in the timeline, things should be
  15. There is one in this thread here
  16. Hey @Ali Manuel That page actually uses GSAP 3.5.1 and ScrollTrigger. The answer to that question of yours depends on which animation it exactly is on that page, you are referring to. For the text-block on the left for example: Sure, pretty much doable with just HTML, CSS and the use of GSAP, triggering the animation on scroll with ScrollTrigger ( they are setting overflow: hidden to the page's body in between those 'full-page-like'-transitions, to prevent users from scrolling further, before those time-sensitive transitions have finished ) For the
  17. @ncti If I understand correctly this should be exactly what I showed above.
  18. Hey @ncti I'm guessing that this is what you mean by 'moving' (see pens in full pageview - it doesn't really show in the previews in here) https://codepen.io/akapowl/pen/d68c2513215e13e70d4b647cc89cf0b5 If you want not only the #pricing to stay fixed, but everything else too, you should apply the pin to an element that contains all of what you want to stay still. I added a .content-wrap here that surrounds all your content there, and pin that one instead. https://codepen.io/akapowl/pen/a4900831167d41f67171a460b7767dba
  19. Hey @pjtf93 Working quick on codesandbox in that environment you use really was a pain for me, so I decided to show you an example in a forked codepen instead. The key to that demo is understanding how durations and thus also the position-parameter work on ScrollTriggers with scrub applied: https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub What I did here, was 1) Add those <p> paragraphs (instead of your h1s) to the HTML-Markup inside of each .panel-text 2) center things up via CSS inside each .panel-text b
  20. Aren't you live in like a minute? @ZachSaucier 😅
  21. @sinobra Welcome to the forums. Sure, using the AttrPlugin baked into GSAP's core, that is pretty much doable. Core plugins are similar to plugins for GSAP in their structure but are included in GSAP's core and don't have to be loaded using gsap.registerPlugin(). You can think of them as just a part of GSAP. ...just to say so you wouldn't even have to load anything else but e.g. the gsap.min.js for using it. https://codepen.io/akapowl/pen/85ce08b334c1c324bb15c092277f2e8a
  22. Hey @Paddyaa5 - welcome to the forums. I wrote up quite a lenghty and detailed explanation on the trickiness of this in this thread here You could apply a similar concept for the 'offset' to your pen. Luckily enough, applied to your base-example it looks much cleaner than in the examples of the thread I linked to. https://codepen.io/akapowl/pen/cc86810dacb287478f4cace69ac7dc8d Hope this helps. Cheers, Paul
  23. Hey @yasserzakaria1993 With that second part of the animation you mean something like this? https://codepen.io/danwilson/pen/ZGmeRO I think that should be achievable with GSAP's MotionPathPlugin I myself am not very experienced with it, but there are quite a few demos, that should get you on the right track. If you run into any more specific questions along the way, let us know Hope this helps for now. Cheers, Paul
  24. Hey @callmegoon Actually the tween seems to work quite right, if I understood correctly, what it is you want to achieve. The problem actually just seems to be the start you are setting on those ScrollTriggers. Since your start is set to 'bottom bottom' and the trigger is way past that start point on load already, I think on first scroll the animation it will just jump right to the place/progress where it is supposed to be. If you want to start it immediately on scroll (and not jump) you could/should make the start dependent on the .offsetTop of your .tr
  25. akapowl

    Multiple pages flip

    Hey @kabe - welcome to the forums. I tinkered with your example a bit, trying to set the zIndex for the target of the tween inside of GSAP's callbacks. When setting those callbacks to the stagger-object it seems to work. On start the zIndex will be set to 999 and on complete it will be set to 1 in this example, resulting in the animated element always being topmost. tl.to('.page', { rotationY: 180, stagger: { each: 2.0, onStart: function() { gsap.set(this.targets(), { zIndex: 999 }) }, onComplete: function() { gsap.set(thi