Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scrolltriger'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Good day, I am trying to figure out a way to have the animation run individually by the same class. I read the page about the common mistake on the loop but still couldn't figure it out. I know Im supposed to use the array but code did not run. can someone help me please?
  2. Hey all! First of all, I am designer learning some dev style fighting and I am amazed how many possibilities gsap gives, I was a guy with job related mid-life crisis and gsap allowed me to find enjoyment and excitement, just as 15 years ago when I was just starting my design journey Thanks to everyone that participated and contributed to GSAP! I decided to fight with my portfolio as this was perfect opportunity to practice coding and GSAP animations. My issue is - I've been learning three-js with one of the courses available in the net there and wanted to use it w
  3. HI Guys, I have created 2 boxes(large & small).. And i want to animate those boxes differently in different screen sizes. Here in code pen u can see a demo. Its for the large screen device. Here the small box is showing after the first box appears & then sliding to left. But i want to change the animation for medium or small screens. Like first the large box will appear like it do for large screens and then the small box will appear after a few seconds & then instead of sliding left it will disappear after showing a few seconds. I used matchMedia for making
  4. I have this animation, where I am having a hard time making a particular animation complete in almost 20% or start of a particular label. const zoomData = [ {scale: 1, origin: [0.5, 0.5] }, {scale: 18, origin: [0.685, 0.38], steps: [ { type : 'in', el : '.location_1', }, { type : 'out', el : '#text', }, { type : 'out', el : '.location_wrapper .section-title', }, { type : 'o
  5. Sorry for not (yet) having a minimal demo, I hope that someone can point me in the right direction without, but I'm willing to build one if needs be. Also as the my problem ist related to iOS (and iPad OS) I might have to make a video if my explanation doesn't suffice. The situation: I have 6 Sections that fill the Body (minus fixed footer and header) the first is an group picture with transparent divs overlayed that scrollto (gsap.plugin) the related section of the person. Each section has a Timeline with a scrollTrigger with a label dead center. All of that work
  6. Hello All, I created a Vertically Pinned section with GSAP and scrollTrigger the section link is attached. Basically this is working fine for me but there is a problem. I wants that when I click on a specific anchor then it will scrolled to the specific section I tried different methods but it is not working fine. It will be great if you help me in this case. I'll be thankful.
  7. Hi. I want to pin a section and change child sections using fadeIn-fadeOut. I tried to use the onToggle method to get the data attribute or just index for the current section, but in this case "onToggle" doesn't work. Same with "toggleClass". Do you know why this is happening? I know I don't need data attributes, index is enough, but I've tried to do it in different ways.
  8. Hi! Thank you so much for this incredibly valuable forum. I've learned a lot lurking already. I am having trouble animating an alternating entrance point based on class name. In my example all 3 images "reveal" from left to right, but I'd like them to alternate so the images ON the right reveal from the right. Each block has a class of either "reveal-image-left" or "reveal-image-right" that could be leveraged instead if the "reveal-image" selector that's being used across all 3 images now. (The HTML is identical for each block with the alternating positioning done with Flexbox
  9. Hi! Here is a problem. This block moves down because text has 30% width and it has two lines. But script loads faster than text goes on the second line and the block moves down. I can't use <br/> because on mobile it will be other. How to fix it?
  10. Hi there! On mobile safari autoscrolling to the sections is lagging. Can you help me to fix it?
  11. Hello, First of all, i'm totally new to GSAP and really in love of it! Congrats team for this work. I work on an Angular v10. I would like to know if this following code follow the good practices for GSAP or if i can optimizes it better. Sometimes when i refresh my page, all animations are playing on the scrolltrigger simultaneously like they have lost their real positons. (i can add a video to show the issue) drawLine() { gsap.defaults({ease: 'none'}); gsap.set('.ball', {xPercent: -50, yPercent: -50}) var tl = gsap.timeline({ defaults: {
  12. After calling scrolltrigger refresh function in the middle of my page (to update starts and ends when accordions are opened) every single animation that happened before my location on the page broke If I go back to the beginning of the page before calling the scrolltriger refresh everything works prefectly, but not if I am in the middle of the page Unfortunately I can't share any code since it got a lot to it, and I simply can't create a simpler version. Maybe someone had a similar problem before I have tried using refreshPriority, did not work I have 6 accordions in total,
  13. Hello everyone, I have a serious problem that I can't solve. I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position. Is it possible to solve it? Thank you very much
  14. Hi there, I was wondering if it is possible to add GSAP animations between these other animations that have ScrollTrigger. I mean the run some animations inside the first section, finish this animations and then animate the overlap transition to the next section. The same with all the following sections. I'm kind of new in these animations and couldn't find more examples to try. I was trying with disable method on ScrollTrigger but nothing so far. Thanks in advance.
  15. Hi, I am currently working in a proyect using React, Tailwind css and Scroll Trigger, and I have a problem working to gsap triggers, the problems is that animation starts before the trigger. the structure is as follow: 4 sections, any section is pining for 100% height, and in the third section need to animate 4 containers but, the animation start to happend if i put the selector in the last section. This is the sandbox of example: CodeSandBox
  16. Hi! I made a timeline attached to a scrolltrigger. When the SVG div appears on the screen, the title is animated, then the subtitle, the icon and each element of the formula, the problem is that the word How Genius barely "appears", the rest of the elements are animated for more than the user has not scrolled to see them, and I would need each element to follow its animation as it scrolls, how can I do? I don't want to use scrub
  17. I am having trouble getting my ScrollTrigger animations to fire dynamic animations (those of which are housed in premade functions) that a user selects from a wysisyg on a tabbed template. My setup is using react in conjunction with the GSAP library and things are componentized so we don't really always know what's on the page so we need the component to be able to restart itself. The issue comes when I am trying to trigger the animation upon tab click. OnRefresh it would be great to key off the tab click to be able to restart the ScrollTrigger animation and have it actually only fire upon scr
  18. Hello! I had a new problem. I use GSAP and ScrollTriger. On mobile devices when I click on Input, the keyboard appears, because of this restart the animation. Animation is also restarted after the keyboard disappears. Is it possible to overcome? I really hope for your help.
  19. Hey, I have a question with an animation I'm doing. I have like text message bubbles and when you scroll they need to appear but when the bubbles are near the end they start overlapping each other. How can I make them keep the same space during the timeline?
  20. Hello! Please help me. I have a sample code on Codepen https://codepen.io/victor_trunov_/pen/vYgKmwM I have the following problem: 1) I clean the Google Chrome browser cache on Android. 2) I open the page and move to the end of the page. 3) All the effects that I applied through GSAP are updated in the visible area. The effect of blinking is created. Please help solve it. P.S. If I just refreshed this page without cleaning the cache, then there will be no problems.
  21. Hi all, So i'm new to GSAP in general and came to it for ScrollTrigger. I've been working on my site as shown above but have run into a few questions: (a) This is more general. Lets says something is pinned, i'm having no problem animating that pinned item but as soon as the animation is done the pin desists and the page keeps on scrolling. Is there a way to make the animation occur and then have the item remain pinned without an animation for a certain distance scrolled before the next content? I go around this in some extent on my title by using expo.in as the ease,
  22. hi first of all sorry for my english im trying to replicate navigation menu of http://www.alsafarproject.org/en/map ,its kinda cool it has some skew on scrolling and its smooth and its multi stage, for example when you click on countries in menu submenu will comeup with a nice animation. so i try to make it with gsap becuase why not😃 so here is my long list of question: 1- why my last <li> element is not showing? 2-when i use a low divider in (self.getVelocity/-2000), like -300 when you switch scroll direction fast you will get some choppy skew ani
  23. My goal is update a Three JS scene (colors, camera position, material properties, etc.) based on state properties set by the timeline. My scene is rendered inside of the BlobScene component which accepts an intensity prop. In the sample below, I'd like to update the intensity as the timeline is scrubbed which then updates the light intensity of my scene. In the pinned section, there are two columns: the left column contains text that will be translated into view and the right column contains the BlobScene. My ultimate goal is to change the color of the blob for each corresponding t
  24. Can anyone help me out this. I just want sticky section with smooth scroll. https://codepen.io/farrukh1194/pen/KKNLOZY
  25. Hi, I'm working on a pretty basic static scroll animation with scrolltrigger, but i have an issue where the section jumps after the animation is completed. The jump is super visible and I've been searching for a solution for close to a week now to no avail. It seems the issue is related to the translateY being added and removed to create the pin-spacing effect. Here's a link to a video showing the issue, if the issue isn't super obvious, i'll create a codepen and share that. Any help will be appreciated 🙏🏾
×