Bobby18 Posted May 30 Share Posted May 30 Thank you for reply. I am attaching a zip fle here to have a look over the issue. please check and help me. regards. Original topic h.zip Link to comment Share on other sites More sharing options...
mvaneijgen Posted May 30 Share Posted May 30 Hi @Bobby18 welcome to the forum! We ask for a minmal demo, so that we can dive directly in to the code and don't have set it up ourself before we can help you. If you would be so kind to create a minimal demo in one of the places provided were codepen is the easiest of the bunch, then someone here will be surely able to help you. I've also split your question from the original topic, no need to bother all those people 4 years later. Below a pen you can fork and place your code in. See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
Bobby18 Posted May 30 Author Share Posted May 30 Thank you for reply. See the Pen MWdJVvG by Bobby-Arya (@Bobby-Arya) on CodePen kindly check above URL. Link to comment Share on other sites More sharing options...
mvaneijgen Posted May 30 Share Posted May 30 I've done some tweaks and add 180 degrees to each element and this seem to do the trick. I've also updated to the latest version of GSAP. Hope it helps and happy tweening! See the Pen mdYRLRB?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
Bobby18 Posted May 31 Author Share Posted May 31 Yes! this is working now Thank you and can you guide what if I want to spin this in other direction? 2 - If i want to add more branches then what changes do i need to make? regards Link to comment Share on other sites More sharing options...
mvaneijgen Posted May 31 Share Posted May 31 34 minutes ago, Bobby18 said: Thank you and can you guide what if I want to spin this in other direction? It rotate both was based on where the current item is, there isn't really "other direction". If you only ever want it to spin in one direction you could keep track of the current item and then check how much the items that is being clicked is removed from that spot and then calculate how much it should rotate in your particular direction to get to the same spot. 38 minutes ago, Bobby18 said: 2 - If i want to add more branches then what changes do i need to make? If they all get the class .circle I think nothing would change, but I would just try it and the if an issue arrives tackled that when you get there. Hope it helps and happy tweening! 2 Link to comment Share on other sites More sharing options...
Bobby18 Posted May 31 Author Share Posted May 31 All right buddy! thanks again. lets cheers!!! Link to comment Share on other sites More sharing options...
Bobby18 Posted June 3 Author Share Posted June 3 Hi! one more question...can i make it auto rotate in a certain time? Link to comment Share on other sites More sharing options...
mvaneijgen Posted June 3 Share Posted June 3 Sure, but how and what is should auto play is up to you, because there will need to be some logic what to do when the visitor has clicked, what do you want to do when it is auto playing and the user is clicking. Maybe keep track if the user is hovering over the elements and then stop the autoplay, and in how many seconds should it start autoplaying again when there has been too activity? This could be done in so many ways and most of them are just plain Javascript (and is outside the scope of this forum). My advise just start building and tackle issues as they arise. Next time with each question please post a minimal demo, we love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! Hope it helps and happy tweening! See the Pen gOJmVzG?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen Link to comment Share on other sites More sharing options...
Bobby18 Posted June 3 Author Share Posted June 3 Yes....but there is a problem. Its not selecting container which we are selecting on click...also active class is not changing on autorotate... please guide. Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 3 Share Posted June 3 What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ Link to comment Share on other sites More sharing options...
Bobby18 Posted June 3 Author Share Posted June 3 thank you for the URL but what I am trying is as you that on mouse event it is rotating and showing active wing and one div container related to that wing. I also want to rotate this automatically and and active class on wing and related div display. I read your URL but i could not find. please help Link to comment Share on other sites More sharing options...
GSAP Helper Posted June 3 Share Posted June 3 We get your question, but sadly we don't have the time and resources to build custom solutions for our users. We love help nudging you in the right direction, but we can't build it for you. So feel free to fork any of the pens above and start thinkering with it. If you have a specific question be sure to post a minimal demo showing what you've tried your self and a clear description of what you're trying to do. If you're just looking for someone to build it for you, we have a Jobs & Freelance forum where you can post your requirements and get someone to quote you how much that will cost to build or contact us directly for paid consulting https://gsap.com/community/contact/ Anyone is free to answer the question if they like, we just want to manage expectations. Link to comment Share on other sites More sharing options...
Bobby18 Posted June 4 Author Share Posted June 4 Ohhh!! I See. got it. but no thanks i already have an account on other forum to help others but never ask them to do so. god bless you thank you. Link to comment Share on other sites More sharing options...
Bobby18 Posted June 18 Author Share Posted June 18 Hi Mitchel! if possible can you please guide how to add class or highlight active blade in below tutorial. See the Pen gOJmVzG by mvaneijgen (@mvaneijgen) on CodePen thank you for your help so far. Link to comment Share on other sites More sharing options...
Rodrigo Posted June 18 Share Posted June 18 Hi, Just use the classList API: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList In combination with GSAP's Wrap utility method: https://gsap.com/docs/v3/GSAP/UtilityMethods/wrap() Here is a fork of Mitchel's latest demo (you might want to fix the initial position or index though): See the Pen wvbydJK by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now