Jump to content
Search Community

zozo last won the day on October 14 2018

zozo had the most liked content!

zozo

Members

  • Posts

    45

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Posts posted by zozo

    DrawSVGPlugin 3.6.1

    in GSAP

    Posted

    3 hours ago, zozo said:

    Hi Guys, Cool Thanks ! 

    I have this error though : 

    
warning Pattern ["gsap@./gsap-bonus.tgz","gsap@^3.6.0"] is trying to unpack in the same destination "/Users//Library/Caches/Yarn/v6/npm-gsap-3.6.0-c52bb0925db5dd09b47b83991edac6eedab8a2f5/node_modules/gsap" as pattern ["gsap@./gsap-bonus.tgz"]. This could result in non-deterministic behavior, skipping.
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ gsap@3.6.0
info All dependencies
└─ gsap@3.6.0

    I tried to to do a yarn remove first but It didn't work. How should I proceed ? Thanks ! 

    I think I had a conflict with nuxt-gsap-module which I was not using any way. I removed it, and now when I install it again I get  

    yarn add ./gsap-bonus.tgz
yarn add v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ gsap@3.6.0
info All dependencies
└─ gsap@3.6.0
✨  Done in 6.47s.

    I still see gsap 3.6.0. is it normal ? how can I check the update is done ? Thanks ! 

    DrawSVGPlugin 3.6.1

    in GSAP

    Posted

    29 minutes ago, GreenSock said:

    We just pushed 3.6.1 live, @zozo, so you should be able to snag it the normal way now. Enjoy!

    Hi Guys, Cool Thanks ! 

    I have this error though : 

    warning Pattern ["gsap@./gsap-bonus.tgz","gsap@^3.6.0"] is trying to unpack in the same destination "/Users//Library/Caches/Yarn/v6/npm-gsap-3.6.0-c52bb0925db5dd09b47b83991edac6eedab8a2f5/node_modules/gsap" as pattern ["gsap@./gsap-bonus.tgz"]. This could result in non-deterministic behavior, skipping.
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ gsap@3.6.0
info All dependencies
└─ gsap@3.6.0

    I tried to to do a yarn remove first but It didn't work. How should I proceed ? Thanks ! 

    ScrollTrigger.refresh() Help

    in GSAP

    Posted

    On 6/11/2020 at 8:07 AM, GreenSock said:

    Aha, your test case revealed an issue in ScrollTrigger - you were using toggleClass and when refreshing, it wasn't removing the class before calculating the positions. Your class was affecting positioning, hence the problem. Each time you clicked "refresh" it was basically toggling the class on that element back and forth. 

     

    Thanks for the reduced test case! It made it much quicker to identify the issue.

     

    I made that change for the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) - does that work better for you? 

     

    By the way, toggleActions are totally pointless if you don't have an animation linked to the ScrollTrigger. And it's absolutely fine to set up a ScrollTrigger without an animation. It's quite useful in fact. I'm just saying it's a waste to define toggleActions because those just tell ScrollTrigger what to do to the associated animation. :)

     

    Hi Guys, It seem to fix my problem in nuxt. I did updated it by just copy and past, but how can I make a true update 

     

    On 6/11/2020 at 8:07 AM, GreenSock said:

    Aha, your test case revealed an issue in ScrollTrigger - you were using toggleClass and when refreshing, it wasn't removing the class before calculating the positions. Your class was affecting positioning, hence the problem. Each time you clicked "refresh" it was basically toggling the class on that element back and forth. 

     

    Thanks for the reduced test case! It made it much quicker to identify the issue.

     

    I made that change for the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) - does that work better for you? 

     

    By the way, toggleActions are totally pointless if you don't have an animation linked to the ScrollTrigger. And it's absolutely fine to set up a ScrollTrigger without an animation. It's quite useful in fact. I'm just saying it's a waste to define toggleActions because those just tell ScrollTrigger what to do to the associated animation. :)

     

    it seems to fix my problem if i just replace 3.6.0 with 3.6.1 in my nod module. When will I be able to download the package 3.6.1 ?

    tween with gsap in Nuxt.

    in GSAP

    Posted

    Hi Akapowl, I Fond the solution. Yes you're right, I wasn't writing it right, but I needed to import Back too. Thanks 

    import { gsap, Back } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
if (process.client) {
    gsap.registerPlugin(ScrollTrigger);
}
tl_logo: gsap.timeline({paused:true})

this.tl_logo.from('#main-triangle', {rotation:-27, scale: 0, opacity: 0, transformOrigin:"50% 50%", ease: Back.easeOut, duration: 5})

     

    • Like 1

    tween with gsap in Nuxt.

    in GSAP

    Posted

    Hi Guys, 

    I'm using gsap in Nuxt like this.  

    import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
if (process.client) {
    gsap.registerPlugin(ScrollTrigger);
}
tl_logo: gsap.timeline({paused:true})

this.tl_logo.from('#main-triangle', {rotation:-27, scale: 0, opacity: 0, transformOrigin:"50% 50%", ease: 'easeOutBack', duration: 5})

    It's working but the tween are not apply. It look like it's linear and not easeOutBack. Do I have to import the tween or something ?

    Thanks !

     

    Scroll to #div and +=

    in GSAP

    Posted

    Hi Guys, 

    I have this that is working : 

    gsap.to(window, {duration: .5, delay: .5, scrollTo:'#post_preview_'+this.post.id, ease: 'Power1.easeInOut'})

    I would like to do something like :  

    gsap.to(window, {duration: .5, delay: .5, scrollTo:'#expertises_post_preview_'+this.post.id+' +=100', ease: 'Power1.easeInOut'})

    But It's not working. Is there a way to scroll to 100px above my div ? Thanks ! 

    scrollTrigger in Nuxt on page change issue

    in GSAP

    Posted

    Ah yes thank you Jack ! ok, good to know it's not officially supported, I will have to take time to remove it and try again to install it correctly. If some one know where I can find a good complete install of the bonus instruction for nuxt that would be of great help. 

    Yes it helps ! ScrollTrigger.kill() / refresh() is what I was looking for. 

    scrollTrigger in Nuxt on page change issue

    in GSAP

    Posted

    Hello Forum, 

     

    I'm building a nuxt app, and I have used https://github.com/ivodolenc/nuxt-gsap-module#readme

    to use scrollTrigger. 

    First of all I hope I did right to use it, but I could not manage to make scrollTrigger without it. 

    So now it's working, I have a module that do something on scroll, pin the div a bit then let's go. It's great until you switch page. 

    Since Nuxt is a onepager, it stay on the page and update the content. Since scrollTrigger had some style to my div content, (that's the problem) I can just remove those style on page loaded.

    But is there a cleaner way ? 

    trying to do this with scroll trigger

    in GSAP

    Posted

    Hello, 

    I'm trying to reproduce this https://youtu.be/DkHiVxh8plU

    I can't wrap my head around it.

    I tried to start from this code pen : 

    See the Pen KKpLdWW by GreenSock (@GreenSock) on CodePen

    And made this one, has a first step : 

    but I'm not really sure if I'm going toward the right direction. 

     

    I think in theory, the warper should be like 100vh height, the panel also, with the text inside it with auto height. 

    or maybe the panel have auto height and the second panel is pushed down with css ? 

    The first panel need to be pin when it hit the top, then released when the second panel hit the top minus the height of the inner height of the first panel. 

    Then the warper should be pin, when it hit the top too, but not sure how to calculate when to release the pin on the warper. 

     When I tried to combined pining the warper and the panel, everything's fall appart, so I'm kind of lost here.

     Plus in the end there is this menu.... So maybe I should use a timeline instead ? 

    If someone made something similar and could point me to the right direction, that would be awesome. 

     

    Thanks ! 

    See the Pen ZEWbxmr by romainmalauzat (@romainmalauzat) on CodePen

    issue stagger firefox 48.0.2

    in GSAP

    Posted

    :D I agree it's too old !

    I said I wouldn't support older browser, but hey, they keep sending me bug report on ie11....? 

    That's why I didn't dig too much on the question, I was just wondering if something similar had happened before. 

    I attached the screen cap in case you wanna take look. 

    As you can see, the first 3 are ok, then 5 or 6 are missing, then 5 are ok, then 8 are missing, then 5 ok, the 8 missing. 

    On the web site, you will have to wait for the introduction video, or press the skip bouton. 

    Then, the disk appear, and then the list of the artists name arrived. 

    That's where the problem is with FF 48. 

    Thanks for the help. 

     

     

     

    IMG-7841.JPG

    issue stagger firefox 48.0.2

    in GSAP

    Posted

    Hi, 

     

    I have a problem with a stagger on li with .staggerFrom('#list_artists li', .3 ,{opacity:0}, 0.04 ), only on firefox 48.0.2. 

    The list doesn't show all the element, only part of them, then few second later the rest appear. 

     

    I don't have that version of firefox, but the client showed me a screen capture. 

    I was wondering if there was a known issue with stagger opacity and firefox 48, or if it was just my code. 

     

    Thanks, 

     

    Best

     

    See the Pen by (@) on CodePen

1
2
Page 1 of 2  
×
×
  • Create New...