Sahil
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Sahil
-
@OSUblake Really amazing, thanks for showing what 'keeping it simple' really means.
- 12 replies
-
- 4
-
-
- gsap
- javascript
- (and 1 more)
-
Ya but personally instead of animating containers, I would have animated the containing elements. Don't know why my embedded pen doesn't show up, here is the link. https://codepen.io/Sahil89/pen/mqLNVg
-
Ya sometimes, it's down for me as well.
-
You haven't really set it up as I had suggested. yPercent refers to height of element itself, if you set it to +100, then element will move down 100% of it's own height. If you fix it, then you will be able to change duration on resize. Using yPercent as my demo will be far more reliable. https://github.com/janpaepke/ScrollMagic/issues/105
-
no, I get it. I was referencing all the fun posts you write in jest.
-
I had thoughts of creating a book out of all your forum posts, wasn't going to actually do it but you know somebody can do it. I like the idea of Patreon and YouTube channel, or make a something similar to javascript30. @Dipscom If he becomes president he will ask everyone including you to learn all the new stuff you hate.
-
Animating whole timeline on another timeline/tweenmax?
Sahil replied to Remigiusz Szwed's topic in GSAP
Ya you can control timeline using TweenMax by animating the progress of the Timeline. In following demo animation progresses by 10% every time you click anywhere. It is similar to animating any normal property. Another trick is to use tweenTo method of TimelineMax, it lets you tween upto certain time or label. You can also use tweenFromTo, you can read more on docs. There might be few other tricks, @GreenSock or @Carl can cover it. -
@OSUblake Any polyfill that supports x, y? If not, what are the drawbacks of using left, top of getBoundingClientRect?
-
ya, got distracted in trying to explain.
-
you don't have to be so formal, any suggestions from you and other forum members are welcome. I usually refer you as guy who is 100 times smarter than me, so you get the idea. I was considering to slowly give up on jQuery, I was also hoping at some point you will suggest it to me, maybe I was just waiting for iy. Thanks.
- 12 replies
-
- 1
-
-
- gsap
- javascript
- (and 1 more)
-
Ya I have updated the demo with following code inside slideNext function. $('.slider-controls').find('div').removeClass('active'); $('.slider-controls').find('div').eq(currentSlide).addClass('active');
- 12 replies
-
- 2
-
-
- gsap
- javascript
- (and 1 more)
-
Your tweens are inside a function and that function wasn't being called.
-
You are not being clear about what you want to do. 1. If you want all p tags to animate on scroll I have posted demo for it. 2. If you just wanted them to animate on page load, then you can do that directly without needing to use scroll magic at all. 3. If you have removed p tags and added span then you will need to update javascript to animate span tags. It will be better if you post a demo to show what is not working and clarify what you are trying to do.
-
ya all p tags inside individual article. If you are not familiar with jQuery selectors you can read it here. That site covers most other basics which will improve your foundation.
-
I have updated the tween, and changed offset on triggers. var tween = TweenMax.fromTo($(elem).find('p'), 0.5, {scale: 0.5, yPercent: 100}, {scale: 1, yPercent: 0});
-
I think you should watch those tutorials I posted in previous reply. It is scroll based animation you can adjust the trigger offset and make adjustments as you like. As for white space etc, you can fix that once you follow the tutorials and change your CSS.
-
Whoever wrote that original demo did great job of keeping things simple, I struggled a lot doing so. Following is the demo, you can add few more conditions so clicking on current slide won't animate it.
- 12 replies
-
- 5
-
-
-
- gsap
- javascript
- (and 1 more)
-
I am not familiar with chartist.js but you can animate it in my opinion though it depends on all the class names etc that it generates. Others will be able to give you more helpful advice.
-
When you use repeat on any tween, it will repeat same animation. Such cases can be handled using different approaches, but always depends on animation. You can use recursive function that will get called every time animation completes and instead of using absolute values, you can use '+=10' which will take whatever current value is and animate it with +10. I am using TweenMax.delayedCall() method instead of timeout or interval because in complex animations it gives you control over everything. Also, you can't have separate eases for from and to parameters. You seem to have wrong idea about easing, easing just defines how entire animation is going to calculate, so it basically eases animation itself nothing else.
-
var header_text_1=document.getElementById("scroll_1"); TweenLite.from(header_text_1, .5, { ease: Power0.easeOut, y: 10 }); var header_text_2=document.getElementById("scroll_2"); TweenLite.from(header_text_2, .5, { ease: Power0.easeOut, y: 10 }); It works but there are some issues with your set up. You are using ids inside first two articles only so you will never notice any animation on rest of articles. Plus you are calling that animation out of any event, so there is no chance of anything triggering on any event. Following is the demo that shows how you can use ScrollMagic so you can edit it change animations however you like.
-
You will probably have to do that using something like ScrollMagic, following are some tutorials that will help you learn basics. It works with horizontal scroll too.
-
Ya it seem to work now, do you have any other question?
-
Here is short tutorial series, that will help you learn all the basics of ScrollMagic.
-
That's because you were changing it's visibility on wheel event rather than on scroll event. https://jsfiddle.net/jh42z38z/ Also, try posting your demos using Codepen, most of forum members are used to it. If you want to continue posting using jsfiddle, post your link within post instead of posting it in textbox with label 'Codepen URL' because jsfiddle links don't show up in post when you post it like that.
-
Unfortunately, I recently had some issues with my system and I am yet to completely restore it. So I won't be able to edit svgs. following is similar thread and there is example you can use. So basically you hide your mouse cursor and use element as cursor, that site is setting css property 'pointer-events' to none so you can click through the cursor element. You can use polyfill for it. Following is another thread you might want to take a look at. Finally, that mousedown animation is simple. Those arrows are hidden, so their opacity is turned to 1 from 0 and circle is scaled up. Hope that helps.
