chani
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by chani
-
-
@GreenSock How much does paid assistance cost?
And how does the work process go? -
10 minutes ago, GreenSock said:
s the docs indicate, containerAnimation does not accommodate pinning (horizontally). That can get extremely complex especially with nested things.
Thank you for your help.
I focused on the problem
It is possible to attach the ScrollTrigger to the main container and not to the animated element
And I will calculate the start and end values of the animation in relation to the scrolling of the container? -
24 minutes ago, GSAP Helper said:
מתנצל על חוסר התגובה עד כה, אבל נראה שאנשים מתקשים לעזור בשאלה הזו. פרטים מעורפלים כמו 'זה שבור' או 'זה לא מתנהג כפי שציפיתי' קשה מאוד לאנשים לעזור בהם. הנה כמה טיפים שיגדילו את הסיכוי שלך לקבל תשובה מוצקה:
Thank you for your willingness to help
I will try to explain myself better
I want the text of the numbers with the class 'UP' to start moving ('y:'50px) when it enters the display and finish moving when it leaves the displayor in other words:
I want the elements inside the section to move at a different rate than the scrolling of the section
When I tried to perform some kind of horizontal scrolling animation like in this example:
See the Pen WNjaxKp by GreenSock (@GreenSock) on CodePen
The animation worked properly together with containerAnimation but as soon as I added stops like in this exampleSee the Pen WNKrgmX by chaniy (@chaniy) on CodePen
The animation didn't start and end like the start and end values I wrote for it in scrollTrigger. -
-
-
היי
הצלחתי לשייך את האנימציה ל- containerAnimation וזה עבד מצוין
אבל אחרי שהגדרתי את הכיוון מימין לשמאל
אז משהו משתבש
בפעם הראשונה לאחר הטעינה האנימציה מתבצעת מיד כשהיא מגיעה לקונטיינר ולא כשהיא מגיעה לטריגר. לאחר הפעם הראשונה זה עובד כמו שצריך
מה יכולה להיות הסיבה לכך? -
1 hour ago, Rodrigo said:
Honestly I think is better in this case to use the Container Animation feature for this:
Hi,
Thank you for your help
I'm quite new and working hard on a really complex website, this is a small question from a whole website full of animations (maybe after I'm done I'll share it with you :))
I tried using the Container Animation
But I wasn't able to create a good timeline to which I could attach the animation with a start and an end
If it's not difficult for you, it would really help me if you could demonstrate to me, I would really appreciate it from the bottom of my heart. -
hey,
See the Pen dyKaKeJ by chaniy (@chaniy) on CodePen
Hey,
I'm trying to add an animation to the class 'b' so that it starts running when 'bAnimation' appears
But I can't connect the horizontal scrolling to the timeline and set correct start and end values so that the animation starts on timeThank you for your help
-
hi
On 13.12.2020 at 10:26 PM, akapowl said:בְּסֵדֶר,
כמו תמיד, כדי שמשהו כזה יעבוד, זה לא פתרון אחד שמתאים לכולם , אז אתה כנראה לא יכול לסמוך על ההדגמה הבאה שתעבוד בכל תרחיש שאפשר להעלות על הדעת. אבל הייתי סקרן בעצמי איך משיג משהו כמו מה שתיארת עובד והגעתי לרעיון הקטן הבא הזה.
זה עובד כמו שצריך (גם לאחר שינויי גודל), אבל אם תרצה לעשות דברים אחרת, תצטרך להחיל את השינויים בעצמך ולמצוא דרך להפעיל אותו בתרחיש שלך, אם ההדגמה שלי לא תעבוד בשבילך. זה רק למטרות הדגמה של איך אפשר להשיג את מה שהתכוונת.
לדוגמה, הוספתי שוליים כדי להרחיב את האלמנטים - והוספתי מעטפת סביב האלמנטים, שההדגמה שלי משמשת כאלמנט הטריגר עבור כל אחד מה-.thumbnail-ScrollTriggers. לעטיפה יש רוחב מוגדר (ששווה לרוחב של כל האלמנטים האלה בתוספת השוליים שלהם) - שבהחלט תצטרך להתאים לתרחיש שלך. זה אולי נראה פרוע, אבל זה באמת הגיוני. כמו כן, שים לב שיצאתי משימוש ב-display: flex ליישור ה-.thumbnails, כי זה המשיך להתעסק ברוחב של אותם אלמנטים, אז במקום זאת הלכתי להשתמש ב-display: inline-block ו-float שנשאר על ה-.thumbnails עצמם. . ישנם לא מעט שינויים אחרים ב-CSS, אבל זה יהיה יותר מדי להתייחס לכל אחד מהם כעת.
עבור ScrollTriggers עצמם:
אני משתמש בטריגר אחד להצמדת ה-.container - זה מה שהופך את כל העניין לגלילה. מכיוון שהיה לי אותו שם כבר, בלי לעשות שום דבר אחר, חשבתי שזה יהיה רעיון טוב למנף אותו גם להנפשה של סרגל הגלילה/המחוון המזויף שהערת עליו בהדגמה שלך.
הוספתי ScrollTriggers בודדים נוספים עבור כל אחת מהתמונות הממוזערות.
אלה ללא הצמדה מזויפת בעצם מתנהגים אותו דבר, כפי שהתנהגת בהתחלה עבור כל המיכל שלך - אבל כאן זה קורה עבור כל חלק בנפרד. עבור אלה עם הצמדה מזויפת, הוספתי פונקציה נוספת, שמחשבת את הרוחב הכולל שלהם לזוז (המשמש לתרגום x שלהם, וסוף ה-ScrollTrigger) שלוקחת בחשבון את כל התמונות הממוזערות הקודמות עם הרוחב והשוליים שלהן.
זה אולי לא מושלם, אבל זה עובד בצורה הגונה.
וכפי שאתה רואה, זה לא הדבר הכי טריוויאלי שאפשר להבין - אלא אם כן אני מסבך יתר על המידה, מה שאולי כן.
עם זאת, זה לא לוקח בחשבון שבשלב מסוים, אולי תרצה 'לבטל' שוב תמונה ממוזערת, אבל זה יכול להיות מחושב גם עבור כל רכיב.
כמו כן, מה שאתה עשוי להבחין בהדגמה זו:
בהתאם למהירות הגלילה, יהיה 'קיזוז' גדול יותר לזמן ההצמדה המזויפת. אני חושב שזה רק קשור לאופן הפעולה של השפשוף - לא תראה אופסט כזה כשהקרצוף מוגדר כ-true במקום ערך אחר. אז אם אתה רוצה להיפטר מהקיזוז הזה, תצטרך להשתמש ב-scrub:true ואם אתה עדיין רוצה שכל העניין יהיה 'חלק', אז תצטרך גם להשתמש בספריית גלילה חלקה נוסף על כך.
עם כל מה שנאמר, הנה ההדגמה שדיברתי עליה כל הזמן
אני דווקא די אוהב את הרעיון, הוא מאפשר גם כמה אפקטי ערימה מסודרים.
בכל מקרה, אני יודע, ההגדרה שונה בהרבה ממה שפרסמת למעלה, ואולי זה קצת מסובך לעטוף את הראש סביב כל זה, אבל אני מקווה שזה עדיין עוזר לפחות להעביר רעיון, איך להגיע למה בדיוק שאתה צריך.
לחיים,
פול
Hey,
I am trying to add animations to the quoted code sample
But can't associate with the timeline to add a start and end to the animation
I would appreciate your help on how to add the timeline
change url background-image
in GSAP
Posted
hi,
I am trying to replace the background of the DIV with the URL of another image
But between changing the background of one image to another, a black screen was created...
How do I fix this?
It should be noted that I need this through DIV and not through IMG
Thank you for your kind help
See the Pen GRBLBdZ by chaniy (@chaniy) on CodePen