Jump to content

_Greg _

  • Posts

  • Joined

  • Last visited

About _Greg _

  • Birthday 11/22/1985

Profile Information

  • Gender
  • Location

Recent Profile Visitors

2,346 profile views
  1. Hi! Did you try to use onReverseComplete same way like you use onComplete(but for hide div)
  2. Hi You can do same thing with ScrollTrigger, check official demos https://greensock.com/st-demos/ If you need more specific answer, please create minimal demo
  3. Hi! You can create job in https://greensock.com/forums/forum/15-jobs-freelance/ please read the rules before
  4. you need to declare tl outside of a function, something like: ... //your code gsap.registerPlugin(ScrollTrigger); let targets = document.querySelectorAll("h2"); let tl = [] // declarate like array ... targets.forEach((target, index) => { tl[index] = gsap.to(target, { x: 100, scrollTrigger: { trigger: target, markers: true, start: "bottom center" } }); }); ... //After you can get and kill every tl tl.forEach(timeline=>...) Or you can add id and after getbyid (but you still need list of all ids)
  5. Please create a minimal demo. This is hard to see what happened without demo. Did you see triggers are in the right place if you use markers: true? Are you sure that you need to use onLeaveBack not onLeave?
  6. Hi!. You need to call recalculate ScrollTrigger after resizing with ScrollTrigger.refresh()
  7. Hi! There is hard to understand without minimal demo.
  8. Hi! I didn't see any gsap animations in your codepen, its svg animation. Please create a minimal demo You can check DrawSVG Demos, MotionPath Plugin, Also check Object Along MotionPath demo
  9. Hi and wellcome. This is not css properties autoAlpha - will be converted to opacity and visibility, rotationX will be converted to transform: rotateX.. check 2D and 3d transforms So you need just write like: tl.from(this.$refs.plate, { autoAlpha: 0, rotationY: -26, rotationX: 72, rotationZ: 5, },2) What do mean to specify 2 for this.$refs.plate, this is something like delay? What do you expect? UPD: SVG doesn't allow 3D transforms, please check this topic
  10. Hi Petr. I'm not sure does it important snippets but if you add .set, maybe add .quickSetter gsap.quickSetter("element", "propName") Also maybe add some plugins like ScrollTrigger: ScrollTrigger.create({ trigger: selector, start: "position", end: "position", }) Draggable.create(selector,{props}) var split = new SplitText(selectors); Also maybe add registration plugin gsap.registerPlugin(pluginName); Or maybe utils gsap.utils.UtilName(UtilProperty) This is just ideas.
  11. Hi! Please create a minimal demo You can find many examples in ScrollTrigger Demos page
  12. Without a minimal demo very hard to say whats wrong If you want create demo with React you can use codesandbox The presented code is not enough to understand what the problem is
  13. Hi! ScrollTrigger is working fine with .from() you can check it in demo Please create a minimal demo
  14. Hi! Please create a minimal demo Buy the way, ScrollTrigger does not have any property with name target, cssRule plugin was deprecated and autoAlpha or scaleX is not css rule. You need something like gsap.to(docImgAfter,{ duration:1.2, scrollTrigger:{ markers:true, trigger:docImgAfter, start:"top center", toggleActions:"restart none none none" }, scaleX:0, ease:"Power1.out" }) gsap.to(docImgBefore,{ duration:1.2, scrollTrigger:{ trigger:docImgAfter, start:"top center", toggleActions:"restart none none none" }, x:-60, autoAlpha:1, ease:"Power1.out" })
  15. This issue not with GSAP or Draggable. As i understand, please correct me if i'm wrong You create global variables (without declaration) so on every interation you rewrite it Read about closure And about scoping rules for let You create variable in window (window.scrollGroupID) not inside function, if you declared variable let scrollGroupID you create scoped variable https://codepen.io/gregOnCodePen/pen/MWOezVZ?editors=0011