Jump to content

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

_Greg _

  • Posts

  • Joined

  • Last visited

About _Greg _

  • Birthday 11/22/1985

Profile Information

  • Gender
  • Location

Recent Profile Visitors

1,325 profile views
  1. Hi! Don't forget to check if object load, only after - you can get contentDocument You dont need wait till document load, only object.
  2. I try to learn all functionality of gsap, there is many methods witch i ever seen or use, so i ask can i use buid-in methods like ScrollTrigger.batch(). I never use it, and I think I can implement my idea with this function 😊 (its working now but only in widget in gsap site )
  3. @GreenSock Yes, this is exactly what I was looking for. The reason i'm trying to avoid a .forEach() - i think that gsap on animate lots of elements with one selector has a built-in method to determine the element at each iteration like y: (i, el) =>... Also, I have tried to use ScrollTrigger.batch, like @elegantseagulls wrote above, but don't understant how to use the scrub 🙁 UPD: I find example scrub is working but again - one start point for all elements : https://codepen.io/gregOnCodePen/pen/abwjXbR?editors=0010 If i open codepen in fullscreen - its show that all elements starts from one point But if i looking in widget: It's a bit strange 😦
  4. @elegantseagulls Thank you! Is there a method without using .forEach()? Something like: ... start: ({element?})=>{ // how to get every element of each interation? return element.offsetTop // how to get element? } ...
  5. Hi! How can i specify for each element start position from center block (not elements wrapper) if elements has `absolute` position I try: elements.forEach(e=>{ gsap.to(e, { ... scrollTrigger: { start: e.offsetTop, // i try ()=>return `top+=${e.offsetTop} bottom` but does't work end: "max", invalidateOnRefresh: true, scrub: 0, markers: true } }) } but see that its work slowly Can i do the same without .forEach
  6. @nico fonseca This is exactly what i want! Thank you! I see first time quickSetter
  7. You can use keyframes like: gsap.to('body', { keyframes: [ { '--bg-1': 'blue', duration: 0.2 }, { '--bg-2': 'blue', duration: 0.3 } ] }) About stagger i'm not sure Also you can set duration by defaults like gsap.defaults({duration: 0.2}); gsap.to('body', { keyframes: [ { '--bg-1': 'blue', }, { '--bg-2': 'blue', } ] })
  8. Hi! I'm a little stuck. I want to make an animation: 1. If the blue rectangle decreases to the position shown on the image + gap - we begin to move the inscription at the same speed with which the rectangle decreases. 2. The second inscription also waits until the rectangle reaches the gap mark What happened is very similar, but not the same. Not sure if changing the coordinate when using onUpdate will not affect performance
  9. Don't use `window.addEventListener("load"...)` inside `document.addEventListener("DOMContentLoaded"..)`!!! Sometimes in Safari window load works earlier then `DOMContentLoaded` so your code will get error why do you call ScrollTrigger but never use? Jack give you instruction how to migrate to gsap 3 It should be const notifyTL = gsap.timeline({paused: true})
  10. Hi! I'm not sure that you need for this task create plugin. And i don't understand what animation do you want Check my example, maybe it helps you. https://codepen.io/gregOnCodePen/pen/qBmbREJ?editors=0010
  11. Hi! can you give more information what does it mean?
  12. I don't see any problem with this. You can hire onLeave callback
  13. Hi @Chipsa! Please create a minimal demo on codepen its hard to answer without any code.