Jump to content
GreenSock

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

Search the Community

Showing results for tags 'carousel'.

  • 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

  • FAQ Landing Page

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

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. I've seen a lot of posts about trying to create a marquee section similar to the one on Cuberto's home page. I'm trying to recreate the marquee but the animation seems to "jump" when looping. I'm thinking my math maybe off in the modifier callback? EDIT: Inspecting the dom elements it seems the row items are overflowing the row slightly possibly because of whitespace generated from using inline-blocks.
  2. Hello GreenSock community 😀 hope you are well and keeping safe!!! I am trying to build a draggable carousel, which when you click an element it expand and animate its content in, other element shrink accordingly. And once a panel is open if you drag the next or the previous panel, it should open the next panel while being drag. So far I have a responsive draggable carousel in React; essentially @OSUblake draggable carousel example but using react (Thanks @OSUblake !!!) https://codepen.io/tomsah/pen/vYKqqVx?editors=0010 I have created the basic animation that I
  3. I'm trying to use slickslider in collaboration with gsap for all the extra features slick has to offer. What could be best practice to hide all slide elements on non-active slides ? I tried to query them all on line 112 and adding them to the mastertimeline but this seems bad practice and deliveres undesirable results (janky, can't get it fixed with split text, gsap can't find certain items) Slick provides a 'slide-current' class with which i query the active slides and have managed to get the animation part going for just the active slide. I'm struggelig wi
  4. Hi, I have made a vertical slider with text, i want to add in the SplitText plugin that i have added but doesn't seem to work it on the code. I have added the codepen below. Can anyone help to see where i am going wrong. Thank you very much
  5. Chronic

    Circular menu

    Hi, I've been trying to make a menu like this: https://maxilla.jp/ where the menu is a carousel and moves when you scroll, drag, or click. I'm guessing I have to use scrollmagic for the scrolling part, but I'm kind of lost. I just want to be able to scroll and the next item follows in sort of a circular path, like a carousel without arrows. I'm not expecting any of you to tell me the answer. I'd be more than happy if you just simply point me in the right direction. Thank you all for your time!
  6. Hi friends, I'm trying to develop a carousel based on this example. I removed the "infinite" feature and I'm trying to create a transition on cards while dragging, that is: while dragging the slider, Card 1 scale down (to the size of other cards) and Card 2 scale up. (When the transition ends I'll get Card 2 title inside and inject in "carousel__card-title" element with another animation). Because of this I think it needs snap in order to determine when a single card transition ends and eventually let control by navigation arrows (next/prev). I'm struggling to understand how to handle the
  7. Hi there, I'm trying to achieve some quite simple animations for my bootstrap carousel slides, but I'm not able to get them rendered at the right moment. What I want to do, is to animate the slides, which are inside its captions, for each slider image when the next image is sliding/ fading into view. Right now, the carousel is set to "pause", so that the slide effect is managed via the carousel indicators or controls. I got to work the animations for the first carousel image with a simple timeline, like so: var tl = new TimelineLite(); tl.from(".tlt", 0.5, { left: 200, autoAlpha
  8. Hello everyone, this is my first post. I build a carousel with gsap3 starting from Sahil example linked below. I change a lot from the original and everything goes well but the movement of the carousel on mouse over isn't smooth. Can you help me? I think this is a nice carousel and can be useful for a lot of user in the future! Thanks
  9. Hi, I have a draggable horizontal carousel, but on mobile it prevents the vertical scroll of the webpage. How do I stop it from only allowing horizontal scroll across the slider? When a user drags their screen to move down the page if they have the slider section on their screen it won't allow them to get further down the website? - This seems like a silly issue so I am aware I am probably missing something simple, any help is appreciated. Thanks Kieran
  10. Okay so as you can see I have built one. I originally used Slick and hacked it about to make it auto advance but it was super laggy and not very reliable. Slick created a good basis (cloned slides etc) so I left that in but disabled the rest of the slider functionality I've then created functions to move the slides with GSAP and re run the function on complete to auto advance the slides. I've also added a pause on hover and next and previous arrows to navigate more quickly. This all generally works but it is slightly laggy on safari (It's okay but if i add text to the slide it become
  11. How would you reverse the direction of this carousel loop without doing any transforms? This is one of the examples for the modifiers plugin. I tried the following but it doesn't loop the items back until all have moved -500. Probably an easy fix. Thanks. TweenMax.to(".box", 5, { ease: Linear.easeNone, x: "-=500", //move each box 500px to left modifiers: { x: function(x) { return x % 500; } }, repeat: -1 });
  12. Hi! I'm new to Greensock and I'm trying to get my head around how everything works. I'm trying to change the direction of this codepen example - I've got as far as to change += to –= but I can't work out what I need to change on the modifier so that the boxes loop. Any help is much appreciated.
  13. helloukw

    Pixi 3D Carousel

    Hello, Anyone knows how to make this codepen example in PIXI.js? The example is made using css properties. I need it to make it in PIXI and I was wondering if anyone knows how to do this. Thanks, ukw
  14. Hello everyone, I'm new and I'm just starting to use GSAP. I have a project on which I have to do a 3D carousel with a reverse perspective (called "topology star" by some people). To be clearer here is a glimpse of what I am trying to do. Currently I modify an example on Codepen but I do not see how to apply a transformation like this. Can someone help me? Thank you all
  15. I'm trying to build a tab slider that has three list items, and three associated copy block + icon. Overall...I'm not really sure where to start on this either. Ideally, when you click a different list item, it switches the content and icon to the correlating tab item and makes the List Item 100% opacity. Screenshot reference attached. I started getting the Tab "on click" working to switch with add/remove class for opacity, but when I try animating it to fade it just changes both of them. Thoughts on this?
  16. Hi Guys Can you help me to develop carousel banner with adobe animate, or i have to do it html5 code, can you guys share any sample, thank you so much
  17. Hi am a newbie in web development only 2 months in and i got inspired when i saw the Nike sbdunk website so i wanted to create something similar, the problem is that when i switch between the different categories (ie. men, women, unisex) too quickly it breaks my code, pls help. Here is my javascript. and i just uploaded to a freewebhost to show this issue https://bucco-cooporations.000webhostapp.com // menBtn menBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (mens.css("right") > "0px" &am
  18. Hi guys, First let me clear one thing, I have no idea about GreenSock and what I am going to ask might be sound stupid so forgive me. I have created one horizontal scroll slider (check my Codepen link) and 30 navigation dots. So what I want to exactly do is when I start scrolling the paragraph container from left to right, that should change the size of above navigation dots. Suppose, if I scroll little bit 1st dot should biggest, 2nd dot little bit big and 3rd one also little bit big and other 27 dots stay small as it is. Again, if I start scrolling from the previous positi
  19. Hi, after having followed the forum, checking many examples and watching some tutorials, I have started playing with GSAP and so far it has been really fun. Now I have used Jonathan's example of the slider with controls (this one: https://codepen.io/jonathan/pen/qqmBjQ ). It worked quite well, but now I am stuck on two things. So I thought now would be a good opportunity to start posting in the forum Is it possible to have autoplay just run once and stop at the last frame? And how could I add digits that let me navigate to each slide and show which slide is active? Here is my exa
  20. Hello guys, Is there a way (I'm sure there is but I do not know yet) to get the same animation in the images scrolling alternately? The top portion of the image scrolls to the left and the bottom portion scrolls to the right. Please see the url below. http://www.poigneedemainvirile.com/ My rough idea is to split the image in two and then create two handler for animations and trigger the animation at the same time. Is there better / more optimized way to do this? P.S. Been reading/studying GSAP for 2-3 weeks already. I have a bit familiarized myself with the concepts and now i
  21. Hey, I wanted to make a slider, each slide should begin as animation example from codepen. Unfortunately, I have a problem with obtaining such an effect. Slider without navigation or dots, just interval every few seconds. The first slide should also appear with animation. I feel that the solution is very easy, and I sit on it far too long to find them. CodePen: http://codepen.io/anon/pen/mOmbza
  22. Help, help, help.... I'm new to GSAP, i need to create a one page website whereby the main section is an animated carousel via slider that look like this: http://assets.wwf.org.uk/custom/foodstory/ ​its a carousel with slider bar, that user can drag the slider to view the animation. the slider some more is need design as per example. OMG but i really no idea how/where to start with it. can i have an example to refer with? ( Please & TQVM T.T
  23. Saw this website http://www.invstr.com that uses Greensock. I was wondering how the background ticks(grey rectangles) were in a animated loop that when they past the viewport they automatically started at the top again... could that be achieved somehow with modifiers plugin like the carousel wrap example? Thanks
  24. Hi guys, I'm developing a GWD banner with a custom carousel using GSAP. I followed this simple example http://codepen.io/bassta/pen/LckBh by Chrysto. I added "prev" and "next" buttons. Sliding takes 0.5 sec for 300px of each slide, but the thing is: if user is super quick and clicks "next" button faster then .5 sec in a row, he ends up in between the slides. Because each click overwrites previous one. I tried to shorten the animation time to 0.1sec, but client wants the slide animation to be long and smooth. I tried to play with overwriting modes, but seems that it is only about killi
×