Jump to content

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

OSUblake last won the day on June 23

OSUblake had the most liked content!


  • Content Count

  • Joined

  • Last visited

  • Days Won


Everything posted by OSUblake

  1. Please look at the demo code provided. There is a certain HTML structure that must be used, like having a viewport container.
  2. You can get if from the style object. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style myElement.style.transform
  3. You can get the current value using the gsap.getProperty() method. gsap.to(".box", { x: 200, onUpdate() { console.log(gsap.getProperty(".box", "x")); } });
  4. Hi fjanroid! If you're new to GSAP, then I would recommend checking out the getting started page, the ScrollTrigger docs, the ScrollTrigger demos, and this tutorial on using ScrollTrigger with React. This thread might also helpful with animating image sequences.
  5. Hi @codenub First, ID's have to be unique. You have #appear all over the place. You should probably change that to a class. Why don't you use a timeline/tween for your ScrollTrigger instead of using callbacks? You can use toggleAction to change how the animation plays.
  6. Hi @Oluwatobiju Judah We'd love to help you, but we don't have the resources to debug something with that much code. We just need to see a minimal demo that shows the issue. I did notice that you are using horizontal scrolling, but I don't see any horizontal scrollbars. Additionally, how is a mouse wheel supposed to scroll horizontally?
  7. Unfortunately, we don't have the resources to provide free general consulting or "build-to-order" solutions, but of course anyone is welcome to assist with that if they want to. I most likely would not use ScrollTrigger for that animation. It looks like it's responding to wheel events, kind of like some these demos. https://codepen.io/BrianCross/pen/PoWapLP https://codepen.io/PointC/pen/YRzRyM https://codepen.io/bassta/pen/kDvmC Those are more full page sliders/carousels like animations, but the concept is still the same.
  8. Hi @p4tric GSAP does not have a GUI like that, nor does it have it any prebuilt animations. Here's a quick explainer of what GSAP is. And for help getting started with GSAP...
  9. You could use Math.min() for vmin and Math.max() for vmax. const vh = (coef) => window.innerHeight * (coef/100); const vw = (coef) => window.innerWidth * (coef/100); ScrollTrigger.create({ trigger: '.my_elem', start: () => Math.min(vw(10), vh(10)) + ' top', // vmin });
  10. Hi @y_springfield I'm not familiar with sveltekit, but that error message looks like it doesn't support actual ES modules. Please look at the installation helper. https://greensock.com/docs/v3/Installation?checked=core,flip#umd import { gsap } from "gsap/dist/gsap"; import { Flip } from "gsap/dist/Flip"; gsap.registerPlugin(Flip); The build is using gsap's package.json to get the correct file, so this... import { gsap } from "gsap"; ....actually becomes this behind the scenes. const { gsap } = require("gsap/dist/gsap");
  11. useMemo might be okay for some stuff, but I generally prefer using a ref as it is equivalent to this in a class component. A new selector utility was adding in gsap v3.7.0, making staggering much easier. React scoped selector (codepen.io)
  12. You could set a negative margin-top in your css for your sections. margin-top: -2px;
  13. I believe you are expecting the labels to behave like the shiftChildren method. https://greensock.com/docs/v3/GSAP/Timeline/shiftChildren()
  14. Hi void! You can add animations wherever you want, and at any time, but if a label doesn't exists, it's going to get added to the end of the timeline. Your timeline is empty, so the outro label is at the same position as the intro label. You can verify the label times. tlMaster.addLabel('intro') tlMaster.addPause(">") tlMaster.addLabel('outro') console.log(tlMaster.labels);
  15. Hi proof of sock! It looks like a rendering problem. Maybe try overlapping your sections a couple of pixels so they are not butting against each other.
  16. Pinning works fine. Your end was messing with it, that's all. A new selector utility was added in 3.7.0, which can help clean all those element.querySelectors. https://codesandbox.io/s/scrolly-4-forked-2hybo?file=/src/App.js
  17. Hooked it up to ScrollTrigger just in case it wasn't obvious. ScrollTrigger Springy Path (codepen.io)
  18. Hi brands and beyond! If you want springy, this pen might help you out. Just move your cursor over the path and watch it spring back. You could definitely hook that up the to velocity. Springy Path (codepen.io) Also, I would always recommend using delayedCall instead of setTimeout for animations. setTimeout isn't synced with gsap and rAF. And with delayedCalls, you can pause, restart, and kill them! https://greensock.com/docs/v3/GSAP/gsap.delayedCall() let delayedCall = gsap.delayedCall(1, () => { // do something }).pause(); //
  19. Hi ahmedoabd, As Jack already stated, we don't have the resources to provide general consulting. We're here to help with specific GSAP questions. I think you should take this one step at time. Focus on making the animation you want first.
  20. Hi 49HitCombo! We're happy to answer any GSAP-specific questions, but we don't have the resources to provide free general consulting or "build-to-order" solutions. And I don't know how you intend this smoke to look, but if you're going for a realistic looking smoke, then you will probably need to use WebGL. https://codepen.io/sbrl/pen/zNdqdd
  21. Hi UwetU! Have you check out the scroll trigger demos? You might be able to find something close to your needs in there. https://greensock.com/st-demos/
  22. You definitely should not have to use setTimeout. I'm assuming that that there must be some type of event/callback when your contentful stuff is loaded. You should definitely be hooking into that somehow.
  23. Hi Charles! Changes in frameworks are done asynchronously so updates can get batched together. So you need to wait for the DOM to render those changes. https://vuejsdevelopers.com/2019/01/22/vue-what-is-next-tick/ this.flexClass = !this.flexClass; this.$nextTick(() => { Flip.from(state, { absolute: true, duration: 0.5, stagger: 0.05, ease: "power1.inOut" }); });
  24. If the scroll triggers have the same params, then you should be able use the timeline. tl.to(section, { autoAlpha: 1 }).to( section, { autoAlpha: 0, delay: 0.95 }, 0.05 ); tl.to(split.chars, { duration: tl.duration(), ease: "circ.out", y: 80, stagger: 0.02, }, 0);
  25. Hi daanpace! This should help nudge in the right direction.