Jump to content

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


  • Posts

  • Joined

  • Last visited

Everything posted by Jean-Tilapin

  1. Oh ! Thank you Anya ! You saved my day ! The "repeatDelay" function doesn't seem to work with that code. There might be a way to add a delay somewhere, I'll figure it out (the dummy line doesn't seem to have an effect). Thanks again ! Edit : var test = new TimelineMax({ onComplete: function(){test.invalidate().restart()}}); test .to('.logo-container', 5, {x:0}); for(var i=0; i<nbLines; i++) { test .staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 1, {rotationY:'-=180', ease: Circ.easeOut}, 0.1, 0) } It works like this. Thanks everyone. Great forum, as always
  2. Thank you for your intervention. There is alreadry a codepen demo showing exactly what my problem is right in the first post of the topic.
  3. Yes ! Thank you both. Thanks to the other topic and Anya's response, I changed my code to : var test = new TimelineMax({repeat: -1, repeatDelay: 3}); for(var i=0; i<nbLines; i++) { test.staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 0.5, {rotationY:'180'}, 0.1, 0); } and it does the effect I was looking for (and it's pretty awesome in my opinion ;D). Now if you look carefully, you can see that my animation resets at every loop instead of keeping spinning from Front to Back to Front again and so on. I'm sorry, this is really a beginner question, but I don't even understand why it does that, so I can't correct it by myself. What should I add ? Or in what direction should I look for the answer ?
  4. No results yet : I tried this : var test = new TimelineMax({paused:true, repeat: -1}).add("start", 0); $('.grid-line').each(()=>{ test.staggerTo(".hexagon-inner", 0.5, {rotationY:'180'}, 0.2, 'start'); }); $('.logo-container').click(function(){ test.play(); }) And still, each line waits for the previous animation to end before start. And I'm noticing another wrong behavior - obviously my fault - but I could need some help to fix that too : On repeat, I was expecting the hexagon to flip again and return to its first state. Instead, once the tiles are all flipped, bug : - tiles position are brutally reset, bud badly : some tiles are half-flipped, other more or less. - then the animation restarts
  5. Hi Great Guys ! I'm facing a little problem here. I will try to publish a codepen - edit : Done - but the HTML structure and JS are quite complexe and the pen may be too hard and long to make for such a little problem. Imagine a grid of hexagon tiles, like a beehive, full width and height. Each line has its own div. A background-image in full screen width is visible. Yes it was quite a pain in the *** to adjust the background-positions on hexagons, but it's done. Now each tile has a backface and when I rotate them, another full-screen image is visible. The idea is too make a "wave-like" effect, from left to right, not a tile after another, but all the tiles of a same column together. Here is an html structure sample : <div class="hexa-grid"> <div class="grid-line odd-line" data-background="home_center_bg_large.jpg" data-foreground="home_left_bg_large.jpg"> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> [etc.] </div> <div class="grid-line even-line"> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> <div class="hexagon"><div class="hexagon-inner"><div class="front"></div><div class="back"></div></div></div> [etc.] </div> [multiple even and odd lines] </div> The JS files generate this structure with the right amount of lines and hexagons, then put the right background at the right position on each face. Now, if I make something like : for (var line of $('.grid-line')){ var gallery = new TimelineLite(); gallery.staggerTo(".hexagon-inner", 1, {rotationY:'180'}, 0.2); } Result is the same as when I don't make the for loop : each hexagon rotates but one at a time. I'd like to start all the lines animations at the same time. How can I do that, please ? Bonus questions : - of course, the idea is to loop and restart automatically this effect every 5 or 10 seconds...? - do you think it's possible to add a third and eventually a fourth background on the invisible face between two loops of the animation ? Thank you.
  6. Oh, I see, I chose the wrong one on my codepen. Sorry. Fixed it. So, I achieved the scroll effect I wanted, but is it okay in a code-quality way ? Efficient and not too heavy for a site ? Thank you all.
  7. Thanks for your participation Visual-Q, but I'm not sure what the problem is ? Is it the "flickering, jumping jittering pinned elements bug" ? Can I help somehow ? About your script, it's a "mouse controlled" exclusively (wheel event) ? Does it work on a phone ? Edit : no, it doesn't work on a phone. I'll try to figure it out. Edit 2 : does anyone know if a touchpad on a laptop trigger this "wheelevent" ? Edit 3 : on my codepen above I've an error "Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object.". I'm not a Codepen Pro (far from it !). What did I forget ? Because the same script works fine on local and test server (beside that touch problem). Edit 4 : I returned to the more classical version of your script, Visual-Q. Now fully "touch" compatible. But my Codepen still doesn't work, I don't know what I forgot.
  8. I may have an idea involving GSAP, but I'm not anymore on my work computer so I can't try tonight. : If my DOM structure is more classical, such as 2 divs in 1 section, divided 1/3 - 2/3, and I use the brillant script of the other topic by Visual-Q BUT I add a ".from" on y-axis for the large div, with the same time as the "up-scrollto" animation, wouldn't it work as I want ?
  9. Thanks for the fix, I didn't know about the scroll bar width ! i edited the codepen. I'll try tomorrow to ask on their forum (you mean on Github ?). Meanwhile if someone passing by can help...
  10. Hello everyone, What I'm trying to do is quite difficult to explain. The Codepen below should show you vaguely what I have in mind... I'd like to improve that base with some awesome effects : - a fullpage effect like in this topic (just start scrolling and it completes the animation thanks to scrollto plugin) But with one major difference : I'd like to trigger automatically 2 sections with a small delay, and both must be pinned together : When the user starts scrolling from the landing screen, the red column should immediately go up (like in the other topic), but the pink one below should automatically follow with a small delay : both red and pink sections must stay pinned until the user starts scrolling again. Then the green column shows up, immediately followed by the light green content, etc. Do you see what I'm trying to achieve ? Besides that, you can see an alignment problem with the pinned sections only the first time you scroll down. Once the sections have been pinned, the bug disappears. How can I fix that ? Thank you for your help ! nb : it is currently a test, I don't care about the DOM structure : if you see a better way to achieve what I want to do, you can of course suggest a different one.
  11. Hello everyone, I thought I started to better understand and use GS, but I realize I'm far from it. I started using GS to animate small stuff on my pages, like a spinning logo while the user waits, or display panels for ajax responses. My problem is that I don't know how to properly reset my animations once their mission is accomplished. Concrete example : - Notation system on an article : registered user can give a note between 1 and 5. - when the user clicks on one of the buttons, I animate the buttons while the Ajax function do its job : spinning and rotating. - when the response comes, the buttons go Up and disappear, and the response message comes from down and autoAlpha 0. - and then, I would like to reset the animations to allow my user to change his vote if he wants to. Here's my code so far : $('.note-btn').on('click', function(){ var spinningItems = $('.note-btn'), message = $('#notation-message'), spinning = new TimelineMax({paused: true, repeat: -1}), upWeGo = new TimelineLite({paused:true}); spinning .staggerTo(spinningItems, 0.5, {rotationY:360, ease: Expo.easeInOut}, 0.2) .staggerTo(spinningItems, 0.5, {rotation:360, ease: Expo.easeInOut}, 0.2); upWeGo .staggerTo(spinningItems, 0.2, {y: -50, autoAlpha: 0, ease: Expo.easeInOut}, 0.2) .to(message, 0.2, {y: -50, autoAlpha: 1, ease: Expo.easeInOut}) .to(message, 0.1, {autoAlpha: 0}, 5) .set('#notation-badge', {className:"-=opened"}); $.ajax({ [AJAX stuff : no pb with it] beforeSend: function(){ spinning.play(); }, success: function(){ $('#notation-message').find('p').text('Vote enregistré'); spinning.stop(); upWeGo.play(); } }) } var spinningItems = $('.note-btn'), message = $('#notation-message'), reset = new TimelineLite(); reset .set([spinningItems, message],{clearProps : "all"}); }); Sorry for the bad indentation. But my questions are : Am I starting to use GS correctly ? If not, how can I improve my code ? And how can I reset my animations to properly put the buttons back to their original state ? Thank you for your time.
  12. Thank you for your help and support. I finally reached my objective, using an array of determined values, which made the animation part easy. I have a new fantasy, now See you around
  13. Codepen (work in progress) : The callback function is the main issue now. Edit : damned, I'm stupid. Losing myself. All these 9 divs are pointless. The whole point is discretly updating the values after the animation.
  14. Oh, ok, I see your point. You're right, it would be faster. But I could also allow my members to type in their own value. Considering the trouble to make that idea happen, I might really consider other options. And...I have another idea, but even the CodePen would take time to make. I'll try to explain... Basically : - the 3 divs containing the visible values are piled up, with absolutely no white-space or borders. They don't move. - each div contains 3 values : one visible, vertically centered, the 2 others hidden, above and below (like the image in the previous post). Overflow hidden. - when the user clicks, each divs makes its 3 values move (with color effect) in the same direction : so, when the visible value of a div goes up or down and becomes hidden, the same value becomes visible in the next div. If the timing is alright, the transition should be invisible. - at the end of animation, jQuery re-calculates the new values. Does it make sense ?
  15. Draggable or clickable, sorry, but what difference does it make ? I still have to know the complete list of values to make it work, right ? Or are you suggesting a "0000" to "9999" counter where the user drags one digit at a time to the value he wants ?
  16. The original value comes from the member who posted the recipe. The others are created by the script, something like (could be adjusted) : - if original nb between 1 and 12, then the "more" value could be nb+1, the "less" nb-1; - else if nb > 12, "more" = nb+ 5; - else if nb > 50, "more" = nb + 10; etc. As I said, the problem is that some recipes could be for "800 grams of rice", another for "1 pie", etc. So the list of values just can't be 1 more at each click : I will not click 300 times if I want 500g of rice ! The min value must be 1, but the max one...hard to determine. But if it helps, we could fix the max value at...maybe 2 000 ? EDIT : the value list could be fixed...Let's say : 1-2-3-4-5-6-7-8-9-10-11-12-15-20-25-30-35-40-45-50-60-70-80-90-100-125-150-175-200-250-300-350-400-450-500-600-700-800-900-1000-[......]-2000 That list must be tried on multiple recipes to see if these numbers are relevant each time.
  17. Of course ! Here's a picture of the current page with css. Sorry it's in french So : - without animation : I can click on '8 personnes', captures the value "8", change the ingredients ("180g de farine" becomes "205g. de farine", etc.) and change the proportions ("6/7/8 personnes " becomes "7/8/9 personnes" with "8 personnes" in black, the others in grey), all with a script using text() and some simple math. - but what I really would like is creating a slideup/down effect instead of an instant change of values. I can of course make a timeline with {y: 32} or {y:-32} but how can I generate the non yet exisiting values for the next slide effect ("10 personnes", "20 personnes", "1000 personnes") ? Is that clearer ? Thank you for your time. EDIT : currently trying to create a CodePen, but not sure it really changes anything.
  18. Hello everyone, It's my first post on your forum. I discovered this library with Scrollmagic and I'm since amazed by its quality. Anyway, here's my problem. I'll try my best to explain but It's quite difficult... I want to allow my users to change the proportions on a recipe on my page by clicking on an infinite wheel/list... For example : Let's say the original recipe is meant for 6 people. Above "ingredients for 6 people" (followed by the list of ingredients), I want to display "5 people", and under "7 people". When clicking on "5 people", "5 people" must take the place and css style of "6", "6" the place of "7", "7" must go down and disappear", and a "4 people" must appear where "5" was. Like an infinite wheel where only 3 items are visible at the same time (with different css styles). Of course, it needs to trigger a function which changes the list of ingredients based on the current proportion... I can't create on every recipe page a pre-generated wheel of proportions values because some recipes are for "1 pie", another for "800 grams of sushi rice", or "30 cookies". The values of the list can't be under 1, and for example, above 12, proportions should increased by 5, above 50 by 10, above 100 by 25, above 500 by 100. I could drop the idea of this animation, it's simple without. A bit of jQuery to capture the current value and calculate then display the rest. But i really want the list to move... Could anyone help me please ? I can't figure out how to generate hidden fields on my list each time it moves... Thank you.