Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 04/17/2018 in all areas

  1. Hi miks, you probably need a debounced function for this – a function that only activates once if it keeps getting called without a minimum time passed between two calls. https://css-tricks.com/debouncing-throttling-explained-examples/ You can either make one yourself, or use one that comes with lodash or underscore.js, or use this one that uses GSAP behind the scenes (and which I made): https://codepen.io/Acccent/pen/OQxjOx If you do use that one, you can do so like this: $window.on("mousewheel DOMMouseScroll", stipple(<your call>, {delay: x, leading: true})); (delay is the time that needs to pass without any scroll events before a next call can happen.)
    4 points
  2. You'd need to write it like this: .add(clearStage(), 0) .add(cloudsMoving(), 1) .add(enterFloorVegetation(), 0) Right now, you have the label names in the position parameter spot and the 1 and 0 are over in the align spot which only applies in the case of an array. More info about add(). https://greensock.com/docs/TimelineMax/add() You could also add a label and then start the nested timelines at the label like this: .add("someLabel") .add(cloudsMoving(), "someLabel+=1") .add(enterFloorVegetation(), "someLabel") Hopefully that helps. Happy tweening.
    3 points
  3. I prefer Draggable for that type of control. Something like this: Hopefully that helps. Happy tweening.
    2 points
  4. The only jQuery I see is the button handlers ... $('#someButton').click( function(){ ... }); You can swap that out for plain JS like so someButton = document.getElementById( 'someButton' ); someButton.addEventListener( 'click', someFunction ); function someFunction(){ // Do some things }
    2 points
  5. Tough to see what is happening here with just a few lines of code ... if possible, a CodePen would give us a better opportunity to help. But, I suspect your issue is due to translating the `X` value vs changing the `left` value. The tween is affecting `x`, so the style.left property will remain unchanged. So we have to get its translated value relative to its initial offset.
    2 points
  6. Hi @dimka Welcome to the forum. It looks like you're trying to create a timeline, but your pen isn't loading TimelineLite or TimelineMax. It's usually easiest to load TweenMax which includes the following by default: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack Here's a fork of your pen with that change. Hopefully that helps. Happy tweening.
    2 points
  7. I don't know anything about Appium, but from a quick search can't you do a TouchAction moveTo? https://github.com/appium/appium/blob/62700d3b1dc0edd985502cc1279747a782f3ee74/docs/en/writing-running-appium/touch-actions.md https://github.com/appium/appium/issues/10178
    2 points
  8. I wonder why you'd even need to involve Draggable at all in that scenario - why not just TweenMax.to() or something? (Meaning animate it). You could use an onStart/onUpdate/onComplete to trigger any updates that you need. Perhaps I'm just misunderstanding the question though.
    2 points
  9. Fixing the sidebar should just be a css solution. position:fixed As far as parallax goes, there is more than one way to skin that cat and it will depend a fair bit on your Javascript skills. Scroll Majic and pins are used commonly for this type of thing, for more information you should visit the Scroll Majic site it has some examples. http://scrollmagic.io/examples/index.html Shaun had some very good solutions that are applicable to parallax recently in these posts. In the second @Shaun Gorneau created a script that links tween.progress to scroll position which has great potential for parallax effects and would be very flexible for changing and/or adding your own logic to. var scrollMax = $(document).height() - $(window).height(); $(window).scroll( function(){ var curScroll = $(window).scrollTop(); if( curScroll > 0 ){ rocketTween.progress( curScroll/scrollMax ); } }) If you search the forum I'm sure you'll find more examples.
    2 points
  10. Hi @Josefina I'd certainly follow @OSUblake's advice. It's a great way to get repeating clouds. That being said, I thought I'd throw my two cents worth out there for you. What you were doing by moving the cloud to x:-2400 can move it off the stage, but then the cloud movement was x:"+=3000". That setup actually only animated to x:600 from its original position (0-2400+3000) which simply wasn't far enough to go beyond the right side. Here's a basic example with the same width as your SVG and a circle path standing in for the cloud. I've set the SVG overflow to visible so you can see where things are landing. You can see that moving it to -2400 does indeed move far enough to the left, but a 3000 unit move is not enough to go off the right side. SVG coordinates can be a bit confusing sometimes so hopefully that helps a bit. As I said, Blake's approach is great and I'd recommend following his advice for some easy repeating clouds. Happy tweening.
    2 points
  11. The code is certainly based on the I Hate Tomatoes tutorial. It seems to take you through the project fairly well I would suggest going through it again to make sure you have implemented it properly and contact author as Carl suggested. FWIW it appears the initial function 'init' looks for any slides that don't have the class 'active' and makes them invisible. At the start none of the slides have this class so they are all made invisible. Try adding class 'active' to first slide in the html on load may fix it. <li class="homeSlide slide01 active">
    2 points
  12. It looks like Shaun is working on an answer, but I'll jump in quick while we wait for his reply. You've got a couple issues with the project. To wire things up from my demo to your project, you'd need to target your masterTl timeline with the draggable element and all the event handlers. 1. Wiring a slider up to an infinite timeline (you have repeat:-1 on several nested timelines) is tricky. I would imagine you'd want users to be able to scrub the animation from start to finish so I've removed the repeats in my fork. 2. The other issue is setting the dragger bounds to 100% instead of a fixed width. This can work by getting the width of the bounds and restricting the dragger to those coordinates. The trick is on resize. You need to listen for a resize event and set new bounds as well as re-position the dragger correctly so it's at the same percentage point of the new bounds. Here's a fork of your pen with everything working correctly. Happy tweening.
    1 point
  13. Hi @Acccent, I encountered a new problem, now is I couldn't use the swipe on my trackpad to move to sections. Thanks!
    1 point
  14. That slider is there to illustrate/manipulate the progress of the timeline and is part of jQuery UI. If you need to replicate that functionality without jQuery/jQuery UI ... you might want to look into (sorry, wrong link ... I'll find the right one) Edit: @PointC's use of draggable is perfect
    1 point
  15. A good site to bookmark. http://youmightnotneedjquery.com/ Happy tweening.
    1 point
  16. @gogo125 There's plenty of examples. I know because I made them. Webpackbin merged with CodeSandbox, so all those demos are gone, but if somebody asks, I can make another version. Another thing that might make searching harder, don't use a version number. It's Angular. Also, you can add scripts to the .angular.cli.json file instead of importing. https://github.com/angular/angular-cli/wiki/stories-global-scripts "scripts": [ "assets/gsap/TweenMax.js", "assets/gsap/plugins/DrawSVGPlugin.js" ]
    1 point
  17. Hi Risko, Welcome to the GreenSock forums. Thanks for all the demos. I really liked the Magnetic Goo! one. Very cool. I've read this thread a few times and it looks like some other have as well. I'm kind of struggling with understanding how to help. Its a pretty ambitious effect to take on for someone beginning with GSAP. Quite frankly I'm not so sure I know what a reasonable solution would be given my level of understanding of the question. We really try to keep our support focused on the GSAP API as figuring out advanced like this can be pretty time consuming. it looks like in your yellow example you have a single path. I think it will be fairly complicated to dynamically morph that path in relation to the mouse position. True SVG Goo is created by blurring multiple items and using the right filters. So for each blob of goo, you probably want 2 or 3 circles that stay close to each other as they get pulled towards the mouse https://tympanus.net/Tutorials/SVGLoaderGSAP/index7.html https://codepen.io/chrisgannon/post/how-to-make-an-svg-lava-lamp Here Sahil created demos and a video explaining how to get a grid of shapes to be attracted to the mouse. There are probably some techniques you can use. Unfortunately, I just don't know how best to advise you to make magnetic goo that reacts to mouse movement but hopefully some of these resources help.
    1 point
  18. Hi and welcome to the GreenSock forums, Don't worry we do the whole "rough" thing here. We'll do our best to help you. I appreciate that you made a demo, but unfortunately I couldn't get it to display anything. Very odd that there are no errors either. We really have to focus our support in helping people understand the GSAP API. Debugging a complex slideshow that doesn't work at all is just a bit beyond what we have the resources to do. It would really help if you could reduce the demo to the bare essentials of just having something basically running that illustrates the issue. I noticed your code looks very similar to that from a tutorial from my friend, Petr Tichy: https://ihatetomatoes.net/greensock-tutorial-create-simple-image-slideshow/ If you are using his demo as a starting point for your project, you might want to leave a comment / question on his blog. Anything you can do to reduce your demo down to something that illustrates the problem with as little code as possible will go a long way in helping us help you. We certainly want to help you understand GSAP, but its pretty hard or us to try to reverse-engineer what looks to be code for a nearly full project.
    1 point
  19. I'd just let each element handle the click individually instead of looping through the entire set. And who needs loops when you can when you can emit events. I do that a lot in games.
    1 point
  20. Is there any reason you're not using a timeline for this? TweenLite.defaultEase = Linear.easeNone; var tl = new TimelineMax({repeat:-1}); tl.from(".div1", 0.5, {x:100}); tl.to(".div2", 0.5, {y:100}); tl.from(".div3", 0.5, {scale:2}); tl.from(".div4", 0.5, {rotation:360}); More info: https://greensock.com/docs/TimelineMax Also check out the position parameter: https://greensock.com/position-parameter Happy tweening.
    1 point
  21. The problem is simple. // Called repeatedly by for loop function displayTribute( tribute, j ) { // Executed immediately console.log( tribute[j], tribute[j+1], tribute[j+2]); $line1.text( tribute[j] ); $line2.text( tribute[j+1] ); $line3.text( tribute[j+2] ); // Happens some time in the future tl.staggerTo( [$line1, $line2, $line3], 3, { opacity: 1 }, 0.5 ) .delay(2).to( [$line1, $line2, $line3], 1, { opacity: 0 } ); } What's happening in the console is the same thing that's happening with your line elements. You need to change the text in the future, not now. You could do that with a callback using .call() or with the TextPlugin.
    1 point
  22. I have Babel set as a default, but I didn't use any new JS features. So what don't you get in that code? Where the names are coming from, or where the function is coming from? I used jQuery's map method as the loop to create the animations, which stores whatever you return to it in jQuery's version of an array. Notice how in the createAnimation function I'm returning a function. That's what's being stored in the animations variable. Just a bunch of functions that were created every time I called createAnimation. And since it's stored in a jQuery object, you can use jQuery's each method to loop through those functions. So no, I'm not creating some function on-demand. It's what was returned during the map calls. As for the names, they can be whatever you want them to be because it's a callback. So this is perfectly fine. animations.each(function(dipscom, likesTurtles) { likesTurtles(event.target); }); jQuery's each and map method are similar to an array's forEach and map method, but slower and a little backwards. So here's a little code using arrays instead of jQuery. Can you understand what's going on here? It's pretty much how I have the animation setup. Run it and you'll set it log out their names and ages. var names = ["John", "Sally", "George"]; var ages = [19, 49, 32]; var persons = names.map(function(name, i) { return { name: name, age: ages[i], info: function() { console.log(name + " is " + this.age + "yrs old") } } }); persons.forEach(function(person, i) { person.info(); });
    1 point
×
×
  • Create New...