Jump to content

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


  • Posts

  • Joined

  • Last visited

About Lichay

  • Birthday 12/10/1992

Profile Information

  • Gender

Recent Profile Visitors

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

Lichay's Achievements

  1. Gsap is free for company use? I am front end progremming and want to use Gsap library until now I use for personal use but currently I want to use in my crompany that I develiping, I can use it ? on free ? Thanks you!!
  2. it wrong way use root style when I need same style on one component only
  3. Hey I have a small question I use that but I am using CSS global variable :host but after I use your solution I need to change to :root and it wrong way to change it inside component. Do you have another solution? Thanks anyway for first way
  4. Thanks it really work. The property duration do the job, I think at first have another property something like priority. Thanks @mikel
  5. Hi guys. I have a little issue with priority, I want timeline start every point in another position and don't same priority. for example const headerDiv: string = 'header+div>h3'; const headerDivDesktop = gsap.timeline({ scrollTrigger: { trigger: headerDiv, start: 'top 60%', end: 'top 30%', scrub: true, markers: true } }); headerDivDesktop.to(headerDiv, {scale: 1.25 }); // X headerDivDesktop.to(headerDiv,{x:50}); // Y headerDivDesktop.to(headerDiv,{y:50}); // Z X , Y and Z start from 60% and end from 30% on this space three of animation happened (X Y Z) I want for example X start in 60% to 40% and Y and Z start only 5% each. for now it take 1\3 of amount => mean - X 60% , Y 50% , Z 40% Thanks for helping guys
  6. I will do two video one from my example and second from your parallax effect with pin Ill record tomorrow
  7. This is code that created by you and I saw all container go small and to side it happened something you need to paly with that. have more example very basic one you can see yourself gsap it clean and have bug too it keep scrolling down (Must use iPhone) on chrome in computer it work perfectlly
  8. I create this for report bugs when I am use pin for any reason every website stack and do some problems 1) stack to go up 2) show images under footer (lower container) most important it happened every codes just need to pin element and it happened If you want to see that yourself you must take one code and iPhone to display I try it with my iPhone (iPhone 12 pro max) and new version ios moreover I try it with sis iPhone (11) and same problem how I recognize that bug ? I developing website and it do that problem and when I use my mom phone (galaxy 8+ it work well) You must try it yourself to see that and fix it fast as possible. @ZachSaucier @GreenSock thank for support more info-- You can use that website that create by you and see that bug. https://codepen.io/GreenSock/pen/KKpLdWW I can add video record from my iPhone in need.
  9. First of all thanks and second I don't see reason to use both phase 1 onRefreshInit: self => self.savedProgress = self.animation.invalidate().totalProgress(), onRefresh: self => self.animation.totalProgress(self.savedProgress) and phase 2 this.scrollTrigger && this.scrollTrigger.kill(); this.kill(); because it work with only one phase and moreover in side phase 2 if I use this.scrollTrigger && this.scrollTrigger.kill(); or this.kill(); it work no need both of them or have reason for performance? (phase 2)
  10. yes it really work but i hard to understand what happened there. in first load it add push (actions.push(action)) but after he get refresh he do get refreshInit by lisener and update the element to current values . That what I understand but it still kepping push every resize and array get be bigger and bigger and slow the website. it hard to understand how it work from inside because if array have 24 length how it possible to read the right css for same element? edit: I actually improve your cod performance to this const imageActions = []; ScrollTrigger.saveStyles(images); ScrollTrigger.addEventListener("refreshInit", () => imageActions.forEach(elementAnimation => elementAnimation.invalidate())); imageActions[index] = action; but I don't understand how it work in your example that length more then 6 how it ready well the style from array that have more then 1 (in your codpen example - .box ) elements inside edit 2: i keep explore it and learn every gsap element refresh very time when resize screen maybe random time or something else for example: gsap.to('.box', { top: 100, y: 5, x: 30, duration: 3, ease: 'power4.out', onComplete: function () { console.log('run'); } } it will print on console when resize screen every some time
  11. after animation finish (go and back) it should let you click on that in my example https://codepen.io/lichaytiram/pen/QWGWPoj change the screen to small size (purple color) let the animation finish after that click on box (green) now you should resize screen size to big and click again on box - you can see the jump the green box go down instead do click animation on top. if you wait on big screen size and click after that you see the box stay on top and he doesn't go down. That my problem inline css stay on box after click event (in complex situation)
  12. but click event isn't include it should be click after animation stop play
  13. Hey, I see reason to add it when I use onComplete function it kill the progress and work well with media query it work well but restart the animation on change screen sizing. so in my situation I prefer use onComplete function and don't restart the animation on change screen size edit: in complex animation it do some issue https://codepen.io/lichaytiram/pen/QWGWPoj and again broken inline style
  14. I think first to set savestyle like on doc, but I think that have better way with onComplete function. it work perfectly but i have small question on your example you create two media query that do same thinks have a reason for that? edit: I add comment