Jump to content


  • Posts

  • Joined

  • Last visited

About Jess.Park

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Jess.Park's Achievements

  1. Thank you so much! I’ll try this approach right away 😆
  2. I have multiple absolute positioned h1s. I want to make h3 to follow smoothly along h1's offsetHeight on loop. But on repeat,h3 starts with a jump from top. How can I fix the jump at the start of loop? Since I'm doing something else in my project, I must use timeline within h1s.forEach.
  3. I'm trying to make card flip animation but with multiple divs. Codepen is my failed attempt. Everytime the card flips, I want to cycle between divs and loop infinite. No matter how many div there is. Is this achievable by gsap? or even css animation only?
  4. Wow, I learned so much from this! Thank you so much! 😆
  5. I made minimal demo! Could you check it again, please? @OSUblake @akapowl https://codepen.io/impetusjj/pen/LYybpre It also jumps when re-entered. Does this have something to do with css variables?
  6. Hi. I want to rotate object when it's in the middle of viewport, and when it's not slowly return to original rotate. (0deg) rotatejumps2.mov It rotates smoothly when entered, but when re-enter it jumps. (please see the attached video) How can I fix this? Related code is in line 100 of the codepen.
  7. Hi. I need help with ScrollTrigger + Timeline. I'm totally lost : - ( I have several div.screens that each styles are set by screensData array. What I want to do is below. <when trigger is pinned by ScrollTrigger> 1. animate .bg backgroundColor from 'transparent' to 'black' 2. wait for 0.2s 3. animate each .screens opacity from 0 to'screensData[i].opacity', scale from'screensData[i].scale-=0.2' to'screensData[i].scale' <when trigger is unpinned by ScrollTrigger> - basically reverse the above 1. animate each .screens opacity from'screensData[i].opacity'to 0, scale from 'screensData[i].scale'to 'screensData[i].scale-=0.2' 2. wait for 0.2s 3. animate .bg backgroundColor from 'black' to 'transparent' I thought it was going to be simple, but somehow it's not. Main problems are, A ) screens.forEach animation isn't firing at all. What am I doing wrong? B ) I'm not sure how to convert 'stagger: 0.15 * dir' in forEach function. (stagger in order when scrolled down, stagger in reversed order when scrolled up) C ) Is there a better way to do this with less lines? something like <when trigger is pinned, play timelineA / when unpinned, play timelineA.reverse(0)>
  8. You're right about duration. If I change duration more than 0, it works. If duration is 0, it doesn't work. Is this supposed to happen? I used fromTo because I have to make sure it starts with certain opacity. But maybe I should just use .set for duration: 0 stuff. I don't like the code, but maybe I should just do this for now. gsap.registerEffect({ name: "swap", effect: targets => { let tl = gsap.timeline() tl.set(targets[0], { opacity: 1 }) .set(targets[1], { opacity: 0 }) .addLabel("now") .set(targets[0], { opacity: 0 }, "now") .set(targets[1], { opacity: 1 }, "now") return tl }, extendTimeline: true, })
  9. That's weird... I see that you're edit version works fine, but then why my codepen isn't working as expected? I set timeline to repeat: 3, so it should do instant change between those two, 3 times. Instead, it doesn't even do once. Let me upload my screen capture. change.mov
  10. Hi. I came back with another registerEffect question 😕 I want to make a simpler way to swap between two divs like below, with registerEffect. gsap.timeline().change([A, B]) // or .change(A, B) I thought it's going to work fine with targets[0] and targets[1], but it doesn't. I wish registerEffect provide some ways to do things with custom argument. Is there a way to do this?
  11. OMG this is exactly, even better than I wanted! You guys in GreenSock are just amazing. Thank you so much!
  12. You're right, this works. I'm sad that I can't do it the way I wanted, (.addSpace("+=1")) but maybe I should settle for this.
  13. yes I know that works, but I just want to know is it really impossible to make it work like 'tl.addSpace("+=1")' this way.
  14. Hi. I *really* want to add pause in timeline by writing like this. gsap.timeline().addSpace("+=1") I saw an old post about this, with TimelineLite.prototype, so I tried converting to gsap 3.0 like below, but it doesn't work. // https://greensock.com/forums/topic/9856-inserting-a-pausedelaywait-into-timeline/?do=findComment&comment=41126&_backrid=69387 // TimelineLite.prototype.addSpace = function (position) { // return this.set({}, {}, position); // }; gsap.timeline.prototype.addSpace = function (position) { return this.set({}, {}, position); }; Now I want to use registerEffect, but it produces error when I deploy. (it works fine in development, weirdly) I also made codepen URL. It doesn't work in codepen as well. gsap.registerEffect({ name: "addSpace", effect: () => { return gsap.set({}, {}) }, extendTimeline: true, }) tl.addSpace("+=0.5); // DOMException: Failed to execute 'querySelectorAll' on 'Document': '+=0.5' is not a valid selector. I'm working on a project that requires a lot of adding pause between tweens, so I really want to make this work. I think the error is about not specifying targets, but I can't figure it out how to fix it.
  15. wow, I didn't know that. To go through all that animating divs and adding that workaround style one by one, it'll be a lot of work I guess...*sad*