Learning

Hi @OSUblake ,

Weird, not sure why, but when I re-try it again, the circle now completes with Math.PI... Heh...
Want to try creating a 'tail' next. Do you have any suggestions on creating that? Should I duplicate the circles, reduce the size and follow behind, or should I try using lines to draw it?

Ah! Dang, I must be blind. Didn't notice that I had both with sin. Thanks!
Hmm... But when I use Math.PI * 2, the circle doesn't close properly and result in a chip off... Not sure why...

Hi @OSUblake,
I think I got a slight hang of how to generate particles in the canvas already, but trying out the movement physics you stated previously, all my particles are just moving diagonally in a straight line instead of in a sin-curve-like way. Did I miss out anything? I wanted to try to grab out from your canvas filter, but there was a lot more stuff in it so I'm not sure what is relevant and what is not. Here's what I'm using,
 

const Particle = function () {
	this.x      = random( w )
	this.y      = random( h )
	this.radius = random( 1, 3 )
	this.angle  = random( Math.PI * 2 )
	this.force  = random( 2, 6 )
	this.color  = random( colors )
	this.vx = Math.sin( this.angle ) * this.force
	this.vy = Math.sin( this.angle ) * this.force
	this.drag = random( 0.82, 0.97 )
	this.wander = random( 0.5, 1 )
}

Particle.prototype.draw = function () {
	context.beginPath()
	context.arc( this.x, this.y, this.radius, 0, 360, false )
	context.fillStyle = this.color
	context.fill()

	this.move()
}

Particle.prototype.move = function () {
	this.x += this.vx
	this.y += this.vy
	this.vx *= this.drag
	this.vy *= this.drag
	this.angle += random( -0.5, 0.5 ) * this.wander
	this.vx += Math.sin( this.angle ) * 0.1
	this.vy += Math.sin( this.angle ) * 0.1
}

Hi @OSUblake ,

Oh my! You're indeed a Superhero!

Yes, the explanation for the physics is exactly what I'm looking for. I want to learn the logic behind it rather than copy and paste.
Yup, I have previously used gsap for some small particle effects and also asked some questions in this forum before, it all worked awesomely, but I do find it starts to get slightly laggy if I increase the count too much, but luckily for that particular project I don't need too many particles spawning so I was able to get away with it. I probably can get away with it this round too, but definitely want to look into a better way to do this.
Going to read the articles and links! Thanks so much~

Hi guys,

I'm trying to achieve a particle effect like this,
http://soulwire.github.io/sketch.js/examples/particles.html
I understand that the example given uses a sketch.js engine to create, but I'm looking to create this using gsap and also using image files rather than shapes, so I'm trying to find out what is the 'physics' logic that causes the particle to wiggle left/right randomly as it fades away. Anyone has any idea? I probably can come up with the particle generator, etc, but the wiggling movement is the one I'm having trouble figuring out... =(

Hi guys,

Actually, I have already solved this, but I would still like to post this in case anyone else faces the same issue.

The issue,

I have found that scrollTo window 0 jerks or stops on iOS devices. Works fine on desktops, Androids, etc.
 

I searched the forums and found a few suggestions to solve this,

- autoKill: false
- autoRound: false
- force3D: true 

I have added all 3 to my statement, but it didn't solve the problem.
 

After much digging around, I found that it is because my scroll to top button is a fixed object which I have cornered to the bottom right of the screen, and somehow iOS conflicts scrolling to top with this fixed position div (I have no idea why). The way I opted to solve this is to set my button to autoAlpha 0 when it is clicked, and when it has finished scrolling to top, I fade the button back in again.

Cheers!

Hope it helps anyone who encounters this.

Hi Jack!

Thanks for the suggestions.
Yes, I do think that wrapping the sub items into an object to reference seem a lot cleaner.
Will definitely use that!
 

I notice you're using a toggle state too, that feels a lot better!
I've always been using an if/else statement and then changing the states inside them with a = 1 and = 0 and that does feel clunky.
Will steal this to use everywhere! =D

Thanks!!!

Hi guys,

I have a simple caption for photos that can be hidden by a click of a button.
As my site has several of them, I decided to create a function to generate this effect across the different photos.

Using an empty object to hold the various items in each photo and click events to manipulate them.

But I felt it is a little scrappy using the object and am not sure if this is the best way to handle it.

There is no bugs or problems per se. I'm just wondering if anyone could help me suggest a better way to handle this functionality, or could this code be improved/shorten or anything? Just trying to learn to code better.
Thanks in advance guys!

 

// empty object to hold photos and their relevant parts
const eic = {};

function createExpandingButtons( pre, id ) {

	// store the various parts of the photo caption
	eic[ pre + 'Button' ]  = id.find( '.button' );
	eic[ pre + 'Arrow' ]   = id.find( '.button span' );
	eic[ pre + 'Caption' ] = id.find( '.caption' );
	eic[ pre + 'State' ]   = 1;

	eic[ pre + 'Button' ].on( 'click', { pre: pre }, function() {
		if ( eic[ pre + 'State' ] === 0 ) {
			eic[ pre + 'State' ] = 1;
			eic[ pre + 'Caption' ].css( 'position', 'relative' );
			TweenLite.to( eic[ pre + 'Arrow' ], 0.5, { rotation: -90, ease: Power4.easeOut } );
		} else {
			eic[ pre + 'State' ] = 0;
			eic[ pre + 'Caption' ].css( 'position', 'absolute' );
			TweenLite.to( eic[ pre + 'Arrow' ], 0.5, { rotation: 90, ease: Power4.easeOut } );
		}
	});
}


// example of creating one such photo caption
createExpandingButtons( '$indexHero', $( '#index-hero' ) );

Hi Carl,

Thanks for the reply. Yeaps, after deleting and resetting everything, I realised that if I wrap the div inside a container and deal with it, it works already! I guess in trying to solve it, I had written too many things and messed it even further, that's why it got really confusing in the end. Sorry for the trouble!

EDIT: Oops guys, after the z-index issue first occurred, I have been moving things around and causing this issue to deepen, after deleting everything and starting over, I realised it works already as long as I don't scale from the top element but the inner child! =x Perhaps the admin can help me close/delete this thread? Sorry for the trouble guys!

Hi guys,

I've searched the forum and found 1-2 similar topics, but I don't really understand the solutions...
So I thought maybe I'll try to ask this question again. Really sorry about this!

So I have a dropdown menu that has a z-index of 10 (so it's above everything) and visibility of hidden.

When I click on a hamburger icon, I used TweenLite to scale it up from 0 to 1 and set the autoAlpha to 1.

This caused the z-index to reset to 0 and thus the dropdown menu appears behind other elements on my page.
 

I have tried including zIndex into my tween, but even if the element.style shows it's z-index 10, the computed z-index stays at 0.

I have also tried using clearProps mentioned in one of the previous threads, but it didn't seem to affect anything too. =(

I understand from the other thread that scaling (transform matrix) will automatically reset the z-index (which is what is causing this issue I'm guessing), but doesn't tweening the zIndex help? Do I have to put my menu at the bottom of my body of every page to make this work?

Thanks in advance again guys!

Hi Dipsom,

Yea, I actually searched the threads for particle examples and built one with an example in the threads.
I don't really see a lag in it, but just to be safe I wanted to know if it's the optimal way of doing particles.

I will go check out OSUBlake's posts as suggested!

Hi guys,

This is not really a script problem, but more of an advice needed.

If I'm doing a 200 particle, particle effect, is it better to tween 200 individual items or to use canvas drawing?

If I understand correctly, if you're using tweens, the browser will be managing individual 200 items every second to animate while if you use canvas, it will be managing one big item but still drawing 200 items in it every second. Is there a performance difference to this?

Also, most particle effects I see are using shapes to generate, but if I need to use img files to generate out the particles, is it a bad idea?

Hello Learning,

 

Part of the reason is because you are using negative z-index -1 on ::after. You should never use negative z-index if you don't want to deal with cross browser shenanigans. You should set higher z-index values that are always positive to prevent this behavior. The reason being is various browsers will treat negative z-index differently and some will ignore or produce buggy behavior like you are seeing. Especially when you start nesting absolutely positioned elements with various negative z-index. which is just asking for trouble.

 

You can just place a default z-index of 2 on your #slide1, #slide2 css rule and give your #slide1::after, #slide2::after a z-index of 1. So you dont have to mess will buggy negative z-index.

 

Plus is there any reason why you are applying your background image as the pseudo -element, instead of just applying each background to each slide div?

 

The opacity is not really opacity but is the alpha transparency of the background-color property, this negative z-index browser bug will cause a background-image to either disappear completely or become opaque when using rgba() for your background-color.

 

I adjusted the z-index for you (only use positive z-index).  I also added rotation: 0.01 to your tweens that are animating xPercent so they animate smoother in Firefox and MS Edge

 

See the Pen LxgQde by jonathan (@jonathan) on CodePen

#slide1, #slide2 {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 5em;
  color: white;
  z-index:2; /* add default z-index which is higher than ::after rule */
}

#slide1:after, #slide2:after {
  top: 0;
  left: 0;
  z-index: 1; /* dont use negative z-index, only use positive z-index to prevent bg opaque bug */
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: url('http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg') no-repeat fixed center;
  background-size: cover;
}

Thanks for the detailed explanations and other useful information!

Ah, I added it as a pseudo element because I Google and found this to be the way to make background images 'appear' with opacity. You can stack background color and background image on the same div? I'll try it later on. Didn't know it's possible, thought that it will override one of them.

Hello! =)

Here's the codepen.

See the Pen MJPKNW by kelvinzhao (@kelvinzhao) on CodePen

If you kill the tweens you will see that the opacity of the background works, but when it starts tweening, the opacity is gone.

Hi guys,

Sorry, one last question today!

Is it possible to change the settings of tweens inside my timeline on the fly?

Like changing its duration or easing?

myTime = 10;
myEase = Expo.easeInOut;

myTimeline.to( $slide1, 2, { xPercent: -100, delay: myTime, ease: myEase } )
.to( $slide2, 2, { xPercent: -100, delay: myTime, ease: myEase } )
.to( $slide3, 2, { xPercent: -100, delay: myTime, ease: myEase } )

myButton.click(function() {
 myTime = 2;
 myEase = Expo.easeOut;
 myTimeline.play(0);
})

Hi PointC,

My bad, it was a wrong naming on my end. The script worked! Thank you so much~ =)

But one quick note, from C to A, it actually reverses the timeline passing through B instead of going through the loop from C to A directly.
Is there a way to overcome that?

Hi @PointC,

It is what I mean, but I tried using the script you suggested and the timeline just stops playing. Hmm...

Hi guys,

I have a div with a background rgba of 0, 0, 0, 0.5 and an image under it, essentially making a background image that looks slightly darker.

And I realised that when I use xPercent to move this div, the background rgba color disappears and my background image becomes fully opaque.

So my question is, does xPercent affect the opacity of backgrounds? Or am I doing something wrong?

Hi guys,

A timeline question, if I have a repeating timeline that loops from label A to B to C (and of cos back to A), and I have a button to click to skip to any label.

How do I have an action that will continue playing the timeline just that it accelerates and scrub till the desired label?
 

So if we are currently at A, and you click C, it plays A to C in 1 second. Or if you are at B and you click A, it plays from B to C then back to A in 1 second?

Ah... Dumb me. Thanks for the solution!

Hi guys,

I'm trying to do a simple carousel where slide 1 moves out and slide 2 moves in...

But I'm not sure what is the issue causing slide 2 not to appear.

When I check the details in browser, I notice that it did have a transform matrix, and when I uncheck the transform, it appears.

When I hide slide 1, the transform works. Hmm...

Here's the simplified test which get similar errors.

See the Pen qRMKKY by kelvinzhao (@kelvinzhao) on CodePen

Note that using :

"rgba( 0, 0, 255, 0.2 )"

 

instead of

"rgba(0, 0, 255, 0.2)"

 

Will not work.

OMG... This saved me. I almost wanted to rewrite the whole logic because I can't figure out why it's buggy and works randomly.

@Carl So technically you can also chain t1.delay(1).play(4), etc? Nice!

delayedCall seems to be the ideal way to do this!

I've been trying to use a javascript timer to play, but I'm not sure if it's because of clearing timer or overlapping timer, there's a lot of problems. Argh.

Thanks!

Hmm... The closest example I can think of is this,

var t1 = new TimelineMax({ paused: true });

t1.to( '#scene-1', 1, { autoAlpha: 0 },0 );

If I have two buttons,

one to play t1 immediately.

one to play t1 after a 3-second delay.

How should I add this variable delay into my timeline?