Skip to content

Instantly share code, notes, and snippets.

Avatar

Oooh Boi oooh-boi

View GitHub Profile
@oooh-boi
oooh-boi / OoohBoi GSAP Teleporter
Created Dec 12, 2021
Copy-paste code into Elementor's Custom Code file or use Snippets plugin for WordPress. If you use Snippets omit the SCRIPT wrapping element.
View OoohBoi GSAP Teleporter
<script>
;( function() {
document.addEventListener( 'DOMContentLoaded', my_stuff );
function my_stuff() {
let is_mobile = false;
let hero = document.querySelector( '#hero' );
@oooh-boi
oooh-boi / ob-show-more-show-less-gsap.css
Last active Oct 13, 2021
Show More - Show Less content in Elementor by using the GSAP (css)
View ob-show-more-show-less-gsap.css
body:not(.elementor-editor-active) .ob-unfold .ob-content { overflow: hidden; height: 200px; }
body:not(.elementor-editor-active) .ob-unfold .ob-blanket { cursor: pointer; z-index: 100; }
/* If you plan to use variable initial heights... */
/*
body:not(.elementor-editor-active) .ob-unfold .ob-content.ob-height-300 { height: 300px; }
body:not(.elementor-editor-active) .ob-unfold .ob-content.ob-height-toggle { height: 0px; }
*/
/* don't forget to append these classes to your ob-content in Elementor !!! */
@oooh-boi
oooh-boi / ob-show-more-show-less-gsap.js
Created Oct 10, 2021
Show More - Show Less content in Elementor by using the GSAP
View ob-show-more-show-less-gsap.js
;( function() {
document.addEventListener( 'DOMContentLoaded', unfold_content );
function unfold_content() {
let close_text = "Show Less";
let the_unfolds = gsap.utils.toArray( '.ob-unfold' );
the_unfolds.forEach( ( ob, i ) => {
View Locomotive Scroll + ScrollTrigger
<script>
;(function() {
// locomotive scroll storage
var loco_scroll = {};
// wait until sfe_loco_scroll available
var chck_if_sfe_loco_scroll_loaded = setInterval(function() {
if (window.sfe_loco_scroll && Object.keys(window.sfe_loco_scroll).length !== 0 && window.gsap && window.ScrollTrigger) {
View Simple GSAP ScrollTrigger Test
<script>
;( function() {
// wait until gsap & ScrollTrigger available
let chck_if_gsap_loaded = setInterval( function() {
if( window.gsap && window.ScrollTrigger ) {
// register scrolTrigger
gsap.registerPlugin( ScrollTrigger );
@oooh-boi
oooh-boi / elementor-tips-tricks.php
Created Mar 28, 2021 — forked from iqbalrony/elementor-tips-tricks.php
Elementor coding tips tricks. (Exclude & Include example for elementor group control)
View elementor-tips-tricks.php
<?php
/*
* Exclude & Include in group control
*/
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'item_background',
'label' => __( 'Background', 'happy-addons-pro' ),
'types' => [ 'classic', 'gradient' ],
@oooh-boi
oooh-boi / gist:a2e47433443125887d20aafd5cec7388
Created Jan 18, 2020
OoohBoi Video Tutorial : Full-height Image Widget in Elementor PRO
View gist:a2e47433443125887d20aafd5cec7388
/* be sure to copy-paste to the Image Widget Custom CSS panel */
selector,
selector .elementor-widget-container,
selector .elementor-image,
selector .elementor-image > a {
height: 100%;
}
selector .elementor-image img {
object-fit: cover;
object-position: 50% 50%;
@oooh-boi
oooh-boi / gist:b25f29433421f353e8d365e46a9d8f71
Created Jan 16, 2020
OoohBoi Video Tutorial : Gradient Text in Elementor PRO
View gist:b25f29433421f353e8d365e46a9d8f71
/* EXAMPLE GRADIENTS */
/* To be used with Heading widget */
selector .elementor-heading-title {
background-image: linear-gradient(to right top, #ec2551, #c52a6e, #943979, #633e71, #3d3a59);
background-clip: text;
-webkit-background-clip: text;
}
/* To be used with Text Editor widget */
@oooh-boi
oooh-boi / gist:5d1f00ee8362292dba0af27700b05d74
Created Jan 7, 2020
OoohBoi Video Tutorial : Super-flexible Sections and Columns in Elementor PRO
View gist:5d1f00ee8362292dba0af27700b05d74
/* MAGICAL CSS Rule */
selector .elementor-container .elementor-row {
flex-wrap: wrap;
/* uncomment for columns alignment */
/* justify-content: center; */
}
/* Responsive Columns Alignment - Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
selector .elementor-container .elementor-row {
@oooh-boi
oooh-boi / gist:80e78f98fb1c0cd48c56a0a414d934b3
Last active Nov 17, 2021
Show hide Header on scroll - OoohBoi video tutorial
View gist:80e78f98fb1c0cd48c56a0a414d934b3
<script>
"use strict";
OB_ready(OB_doWhenReady);
function OB_doWhenReady() {
// localize everything
var ooohBoi = window.ooohBoi || {};
// local scope variables
ooohBoi.prev_scroll_pos = window.scrollY || document.body.scrollTop;
ooohBoi.cur_scroll_pos;