Search the Community
Showing results for tags 'carousel'.
-
Hi, I would like to create a carousel. Carousel has 2 parts, if i scroll 2nd part then it should fade in/out 1st part and show its content.
- 1 reply
-
- carousel slider
- carousel
-
(and 2 more)
Tagged with:
-
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.
-
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 would like to happen when a user click one of the carousel item https://codepen.io/tomsah/pen/WNxqqEz I have tried a few things and I never get the result I am after ?, Element are getting updated using onClick but their position is always off, and when I drag again the carousel it is getting worse I am not sure how to properly update the carousel item with, X & left value properly, and how would I pass the animation to the next item dragged element. Thank you in advanced for your help and time
-
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 with - settings opacity 0 for all items whithin all slides untill the animation starts and the slide is active (when dragging the content of the next slide should be invisible) - furthermore with this approach in codepen i notice splittext keeps nesting upon every slide, i'm trying to style the period (color:red in styles) at the end of the title but can't get consistent behaviour and this seems like bad practice. In stead of trying to reach the last child in css, are there other methods in gsap/splittext i could use te get this result ? Any help would be appreciated
-
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
-
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: 0 }, "-=0.25") .from(".tlt2", 0.5, { right: 200, autoAlpha: 0 }) .to("hr", 0.5, { width: 800 }) .from(".fa-angle-double-down", 2.5, { top: 0, autoAlpha: 0, ease: Elastic.easeOut }) where .tlt, .tlt2 etc are the headings and sub heaings to animate. The problem arises, when I try to achieve animating the elements of the next slides, which are fading in by manually changing to the next slider image. I don't know how to animate them for the moment the next slider image comes into view. If I continue with the same timeline, the effects already happened before the next image was loaded. So I tried to create a new timeline, but it's the same problem. I've heard that there is the possibility to add a Label, but only could change the animation delayed in time, not when the new slide comes into view. So, finally I resort to a little, somewhat anarchical trick with an "onClick" function for each indicator. Like so: <li onclick="myFunction2()" data-target="#carousel-example-generic" data-slide-to="1"></li> and: function myFunction2() { var tl2 = new TimelineLite(); tl2.from("#it-h4", 0.5, { left:200, autoAlpha:0, delay:0.8 }) .from("#it-p", 0.5, { right: 200, autoAlpha: 0 }); } Sure, this is not the finest solution and it only works because of the carousel indicators. So what if I want to set the carousel to fading automatically, setting an interval? Does GSAP have any solution for this issue? Couldn't find any related post. Best regards, Pete
-
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
-
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
- 4 replies
-
- mobile animation
- scrolling
-
(and 3 more)
Tagged with:
-
Trying to create a smooth scrolling carousel that also behaves like a marquee scroller
Matt DD posted a topic in GSAP
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 becomes hard to read, I've tried creating a CSS animation which is smoother but I can't get the extra features to work) Also I'd need to do some tweaking to get the timing to work consistently with different width items as it's set to a fixed 3s per slide Any help much appreciated, I feel like there may well be a much better way to do this with timelines or something similar -
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 });
-
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.
-
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
-
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
-
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?
-
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
-
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" & womens.css("top") >= "0px") { var menTl = new TimelineMax(); menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeIn}, 0.1) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } else if (mens.css("right") > "0px" & unisex.css("left") <= "0px") { var menTl = new TimelineMax(); menTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(unisex, 0.6, {left:"0%"}, {left:"380%", ease:Linear.easeNone}, 0.1) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } else if (mens.css("right") > "0px" & womens.css("top") < "0px" & unisex.css("left") > "0px") { var mensTl = new TimelineMax(); mensTl.to($(".bod"), 1, {backgroundColor:"#cec5b9"}) .fromTo(mens, 1.2, {right:"300%"}, {right:"0%", ease:Bounce.easeOut}, 0.1); } }); // womenBtn womenBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (womens.css("top") < "0px" & mens.css("right") <= "0px") { var womenTl = new TimelineMax(); womenTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(mens, 0.6, {right:"0%"}, {right:"300%", ease:Linear.easeOut}, 0.1) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } else if (womens.css("top") < "0px" & unisex.css("left") <= "0px") { var womensTl = new TimelineMax(); womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(unisex, 0.6, {left:"0%"}, {left:"300%", ease:Linear.easeNone}, 0.1) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } else if (womens.css("top") < "0px" & mens.css("right") > "0px" & unisex.css("left") > "0px") { var womensTl = new TimelineMax(); womensTl.to($(".bod"), 1, {backgroundColor:"#f4b4b4"}) .fromTo(womens, 1.2, {top:"-150%"}, {top:"0%", ease:Bounce.easeOut}, 0.1); } }); // unisexBtn unisexBtn.on("click", function(){ var unisex = $("#unisex"); var mens = $("#mens"); var womens = $("#womens"); if (unisex.css("left") > "0px" & mens.css("right") <= "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}) .fromTo(mens, 0.6, {right:"0%"}, {right:"380%", ease:Linear.easeOut}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } else if (unisex.css("left") > "0px" & womens.css("top") >= "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}) .fromTo(womens, 0.6, {top:"0%"}, {top:"-150%", ease:Linear.easeOut}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } else if (unisex.css("left") > "0px" & womens.css("top") < "0px" & mens.css("right") > "0px") { var unisexTl = new TimelineMax(); unisexTl.to($(".bod"), 1, {backgroundColor:"#727c86"}, 0.1) .fromTo(unisex, 1.2, {left:"300%"}, {left:"0%", ease:Bounce.easeOut}, 0.1); } });
-
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 position 1st dot should be little bit small, 2nd one biggest and 3rd same as 1 little bit big, and other 27 dots stay small as it is. Again, if I scroll again where I left scrollbar 1st dot and last 26 dots stay small as it is, 2nd should be little bit small and 3rd one should be biggest and 4th little bit small. This process should continue until scroll bar reach to right side. And same thing happen with reverse order too means when I start scrolling from right to left animation on dots size should applied reverse side. So I hope you guys understand what animation effect I have to show ? If you any question please let me know. I hope to get answer from you genius. Thank you.
- 7 replies
-
- horizontal slider navigation dots animation
- carousel
- (and 2 more)
-
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 example: https://codepen.io/lukenicktap/pen/peLreK For the autoplay I tried: function loopCheck() { $currentSlide++; if ($currentSlide < 2) { TweenLite.killDelayedCallsTo(play); } But this does nothing. If anyone could point me in the right direction, I would really appreciate it. Cheers, Lucas
-
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 it's time to apply what I have learned so there are some learning curves. Please bear with me. Thanks guys!
-
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
-
need help on what to focus/element for carousel with slider bar animation
candiceysl posted a topic in GSAP
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 -
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
-
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 killing existing animations, not keeping user from creating new ones. var current_product = 0; var products = ["product1", "product2", "product3", "product4"]; gwd.auto_Next_Arrow_tapareaAction = function(event) { var product_image = document.getElementById("product_picture"); if (current_product < products.length - 1) { current_product++; TweenLite.to(product_image, .5, { left: "-=300px", overwrite: "none", ease: Quad.easeOut }); } else { TweenLite.to(product_image, .5, { left: "0px", overwrite: "none", ease: Quad.easeOut }); current_product = 0; } };
-
Hi, I have been trying to create an image carousel for a website, I found Greensock out of a recommendation because jQuery animations aren't as fluid, I looked at the beginner tutorials from Petr and also followed a tutorial he has on youtube, I have been having problems making the images rotate as shown in my codepen. Can someone help me please?