Post Categories

Tutorial

Bermain Animasi Dengan React Native

BY

Isna

|

Animasi tidak melulu soal film kartun atau anime yang tayang di media seperti kita ketahui, baik itu televisi maupun YouTube. Dalam pengembangan perangkat lunak, animasi memberikan bumbu yang menggurihkan fungsionalitas software itu sendiri. Ibarat ayam goreng, animasi adalah kulit tepung goreng yang disukai banyak orang. Nah, kali ini saya akan membahas secuil remahan tentang animasi dan spesifik pada platform React Native yang sedang memanas di dunia teknologi. Dengan begitu, software buatan anda akan disukai oleh banyak orang.

Animasi, dalam pengertian sederhananya, adalah object yang bergerak. Dalam React Native, object yang bisa kita buat untuk bergerak adalah viewable component. Kita bisa membuat object yang semula tampak menjadi tak tampak, berpindah secara vertikal maupun horizontal, hingga mengubah ukurannya. Dengan begini, saya harap para pembaca sudah ada gambaran akan membuat object seperti apa dan bagaimana animasinya.

Kita akan memulai dengan yang paling sederhana, menggerakkan object secara vertikal (dari atas ke bawah dan sebaliknya). Dalam React, ada fungsi setState yang berfungsi untuk me-render ulang komponen. Ini cara yang paling sederhana untuk menggerakkan komponen dengan bantuan setInterval. Coba ubah file App.js seperti dibawah ini.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      y: 0
    }
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({
        y: this.state.y + 10
      })
    }, 100);
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={{position:'absolute', top: this.state.y}}>Look I'm moving</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
});

Jika anda familiar dengan fungsi setInterval dan position yang mirip di dalam CSS, diatas adalah cara yang paling sederhana untuk implementasi keduanya. Selamat anda sudah menganimasikan suatu objek. Yay! Namun, ini adalah implementasi terburuk sebuah animasi React dan React Native. Kenapa? Berikut ini akan saya informasikan alasannya.

1.gif

Dalam screenshot diatas, anda bisa melihat bahwa FPS dari JavaScript Thread berada di bawah 50fps. Ini membuktikan bahwa cara kita untuk menggerakkan suatu objek tidak efisien. Apakah kita harus menyerah dan berharap ada sentuhan magis dari dewa? Tidak berlebihan seperti itu. Ada cara yang lebih praktis dari React Native untuk kasus seperti ini. Kita akan memakai object Animated.

Animated adalah objek khusus yang memang dibuat untuk animasi. Dalam objek animated ini, ada viewable component bawaaan yang bisa kita animasikan, seperti Text dan View. Apa yang perlu kita ubah pertama adalah import Animated dan mengganti Text menjadi Animated.Text.

import { StyleSheet, Text, View, Animated } from 'react-native'; // Lihat ada penambahan Animated

Ubah juga pada method render() hingga terlihat seperti ini

render() {
  return (
    <View style={styles.container}>
      <Animated.Text style={{position:'absolute', top: this.state.y}}>Look I'm moving</Animated.Text>
    </View>
  );
}

We’re not done yetAnimated.Text tidak akan berguna dengan baik apabila kita hanya mengganti component saja. Kita juga harus mengganti cara kita menggerakkan objek tersebut. Kita bisa memakai objek Animated.timing untuk menggerakkan satu atau beberapa objek. Pada method constructor, kita akan mengubahnya seperti ini.

constructor(props) {
  super(props)
  this.state = {
    y: new Animated.Value(0)
  }
}

Karena kita sudah mengubah hal diatas, isi dari componentDidMount kini menjadi useless. Mari kita sesuaikan seperti dibawah.

componentDidMount() {
  Animated.timing(this.state.y, {
    toValue: 600,
    duration: 5 * 1000 // miliseconds
  }).start();
}

Nah, coba reload aplikasi react native anda. Apakah berhasil? Of course, it will give you an error. Kenapa? Hasil dari Animated.Value bukanlah sebuah angka, melainkan objek. Property y pada attribute style hanya menerima angka. Should you give up animation now? Ah jangan mendramatisir. Cukup sosial media dengan kumpulan hoaxnya yang melengkapi hidup anda dengan drama. Ada atribut lain yang bisa kita pakai untuk dikombinasikan dengan Animated: transform. Karena kita ingin menggerakkan dari atas ke bawah, maka yang kita pakai adalah transform dengan property translateY. Kira-kira kode anda akan seperti ini.

render() {
  return (
    <View style={styles.container}>
      <Animated.Text style={{transform: [{translateY: this.state.y}]}}>Look I'm moving</Animated.Text>
    </View>
  );
}

Setelah anda kompilasi jadi satu, kira-kira kode anda akan seperti berikut:

import React from 'react';
import { StyleSheet, Text, View, Animated } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      y: new Animated.Value(0)
    }
  }
  componentDidMount() {
    Animated.timing(this.state.y, {
      toValue: 600,
      duration: 5 * 1000 // miliseconds
    }).start();
  }
  render() {
    return (
      <View style={styles.container}>
        <Animated.Text style={{transform: [{translateY: this.state.y}]}}>Look I'm moving</Animated.Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
});

Meskipun this.state.y memiliki nilai objek, objek Animated.Text ini memiliki mekanisme sendiri untuk mengubah objek Animated.Value menjadi sebuah angka. Sekarang jalankan kembali kode anda setelah melakukan perubahan diatas. Does that looks like this?

2.gif

FPS sudah berada diatas 50 dan itu berarti animasi buatan kita cukup bagus. Selamat! Anda telah mempelajari satu remahan Animasi. Dari sini anda bisa mempelajari hal lain seperti Interpolasi Animasi hingga Animasi Gradasi Warna.

Referensi:

  • http://facebook.github.io/react-native/releases/0.48/docs/animated.html#animated
  • https://facebook.github.io/react-native/docs/transforms.html
  • https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

Source Code:

  • https://github.com/refactory-id/react-native-animation-start

PS: Anda juga bisa mempelajari hal diatas dari silabus kami dengan menjadi bagian dari keluarga Refactory sebagai siswa. Klik tombol Apply untuk lebih lanjut.

Hubungkan dengan kami

Ikuti refactory

Artikel Populer


( ! ) Deprecated: jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead. in /apps/refactory-portal/wp-includes/functions.php on line 5049
Call Stack
#TimeMemoryFunctionLocation
10.0001402064{main}( ).../index.php:0
20.0002402336require( '/apps/refactory-portal/wp-blog-header.php ).../index.php:17
30.368415045552require_once( '/apps/refactory-portal/wp-includes/template-loader.php ).../wp-blog-header.php:19
40.380815128592include( '/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php ).../template-loader.php:106
50.477820408840Elementor\Modules\PageTemplates\Module->print_content( ).../header-footer.php:19
60.477820409216call_user_func:{/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/module.php:207}( $function_name = [0 => class Elementor\Modules\PageTemplates\Module { protected $print_callback = ...; private ${Elementor\Core\Base\Module}reflection = NULL; private ${Elementor\Core\Base\Module}components = [...]; private ${Elementor\Core\Base\Base_Object}settings = NULL }, 1 => 'print_callback'] ).../module.php:207
70.477820409296Elementor\Modules\PageTemplates\Module->print_callback( ).../module.php:207
80.478220410048the_content( $more_link_text = ???, $strip_teaser = ??? ).../module.php:190
90.478320410072apply_filters( $tag = 'the_content', $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<' ).../post-template.php:253
100.478320410472WP_Hook->apply_filters( $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<', $args = [0 => '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<'] ).../plugin.php:212
110.478920413472Elementor\Frontend->apply_builder_in_content( $content = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<' ).../class-wp-hook.php:287
120.479020413848Elementor\Frontend->get_builder_content( $post_id = 5204, $with_css = ??? ).../frontend.php:898
130.479520679984Elementor\Core\DocumentTypes\Post->print_elements_with_wrapper( $elements_data = [0 => ['id' => '87ed402', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '35e86341', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '3fa089f0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '74feba6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '95255d', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../frontend.php:984
140.485020846280Elementor\Core\DocumentTypes\Post->print_elements( $elements_data = [0 => ['id' => '87ed402', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '35e86341', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '3fa089f0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '74feba6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '95255d', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../document.php:933
150.562222816760Elementor\Element_Section->print_element( ).../document.php:1296
160.565822926616Elementor\Element_Section->print_content( ).../element-base.php:650
170.647624903680Elementor\Element_Column->print_element( ).../element-base.php:907
180.652625005264Elementor\Element_Column->print_content( ).../element-base.php:650
190.710926951456Elementor\Element_Section->print_element( ).../element-base.php:907
200.714727061312Elementor\Element_Section->print_content( ).../element-base.php:650
210.714827062768Elementor\Element_Column->print_element( ).../element-base.php:907
220.718027164352Elementor\Element_Column->print_content( ).../element-base.php:650
230.723427292184OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->print_element( ).../element-base.php:907
240.850432171584OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->enqueue_scripts( ).../element-base.php:682
250.850432171960Elementor\Utils::handle_deprecation( $item = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper' ).../element-base.php:152
260.850432172824_deprecated_file( $file = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper', $message = ??? ).../utils.php:487
270.850432173896trigger_error( $message = 'jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead.', $error_type = 16384 ).../functions.php:5049

Case Studies


( ! ) Deprecated: jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead. in /apps/refactory-portal/wp-includes/functions.php on line 5049
Call Stack
#TimeMemoryFunctionLocation
10.0001402064{main}( ).../index.php:0
20.0002402336require( '/apps/refactory-portal/wp-blog-header.php ).../index.php:17
30.368415045552require_once( '/apps/refactory-portal/wp-includes/template-loader.php ).../wp-blog-header.php:19
40.380815128592include( '/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php ).../template-loader.php:106
50.477820408840Elementor\Modules\PageTemplates\Module->print_content( ).../header-footer.php:19
60.477820409216call_user_func:{/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/module.php:207}( $function_name = [0 => class Elementor\Modules\PageTemplates\Module { protected $print_callback = ...; private ${Elementor\Core\Base\Module}reflection = NULL; private ${Elementor\Core\Base\Module}components = [...]; private ${Elementor\Core\Base\Base_Object}settings = NULL }, 1 => 'print_callback'] ).../module.php:207
70.477820409296Elementor\Modules\PageTemplates\Module->print_callback( ).../module.php:207
80.478220410048the_content( $more_link_text = ???, $strip_teaser = ??? ).../module.php:190
90.478320410072apply_filters( $tag = 'the_content', $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<' ).../post-template.php:253
100.478320410472WP_Hook->apply_filters( $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<', $args = [0 => '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<'] ).../plugin.php:212
110.478920413472Elementor\Frontend->apply_builder_in_content( $content = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<' ).../class-wp-hook.php:287
120.479020413848Elementor\Frontend->get_builder_content( $post_id = 5204, $with_css = ??? ).../frontend.php:898
130.479520679984Elementor\Core\DocumentTypes\Post->print_elements_with_wrapper( $elements_data = [0 => ['id' => '87ed402', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '35e86341', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '3fa089f0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '74feba6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '95255d', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../frontend.php:984
140.485020846280Elementor\Core\DocumentTypes\Post->print_elements( $elements_data = [0 => ['id' => '87ed402', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '35e86341', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '3fa089f0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '74feba6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '95255d', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../document.php:933
150.562222816760Elementor\Element_Section->print_element( ).../document.php:1296
160.565822926616Elementor\Element_Section->print_content( ).../element-base.php:650
170.647624903680Elementor\Element_Column->print_element( ).../element-base.php:907
180.652625005264Elementor\Element_Column->print_content( ).../element-base.php:650
190.863832508592Elementor\Element_Section->print_element( ).../element-base.php:907
200.867332618448Elementor\Element_Section->print_content( ).../element-base.php:650
210.867432619904Elementor\Element_Column->print_element( ).../element-base.php:907
220.870532721488Elementor\Element_Column->print_content( ).../element-base.php:650
230.875732849808LivemeshAddons\Widgets\LAE_Posts_Carousel_Widget->print_element( ).../element-base.php:907
240.932233855712LivemeshAddons\Widgets\LAE_Posts_Carousel_Widget->enqueue_scripts( ).../element-base.php:682
250.932233855712Elementor\Utils::handle_deprecation( $item = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper' ).../element-base.php:152
260.932233856576_deprecated_file( $file = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper', $message = ??? ).../utils.php:487
270.932233856896trigger_error( $message = 'jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead.', $error_type = 16384 ).../functions.php:5049
Tag
Artikel Terkait
Lihat lebih banyak artikel bagus dari kategori ini!

( ! ) Deprecated: jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead. in /apps/refactory-portal/wp-includes/functions.php on line 5049
Call Stack
#TimeMemoryFunctionLocation
10.0001402064{main}( ).../index.php:0
20.0002402336require( '/apps/refactory-portal/wp-blog-header.php ).../index.php:17
30.368415045552require_once( '/apps/refactory-portal/wp-includes/template-loader.php ).../wp-blog-header.php:19
40.380815128592include( '/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/templates/header-footer.php ).../template-loader.php:106
50.477820408840Elementor\Modules\PageTemplates\Module->print_content( ).../header-footer.php:19
60.477820409216call_user_func:{/apps/refactory-portal/wp-content/plugins/elementor/modules/page-templates/module.php:207}( $function_name = [0 => class Elementor\Modules\PageTemplates\Module { protected $print_callback = ...; private ${Elementor\Core\Base\Module}reflection = NULL; private ${Elementor\Core\Base\Module}components = [...]; private ${Elementor\Core\Base\Base_Object}settings = NULL }, 1 => 'print_callback'] ).../module.php:207
70.477820409296Elementor\Modules\PageTemplates\Module->print_callback( ).../module.php:207
80.478220410048the_content( $more_link_text = ???, $strip_teaser = ??? ).../module.php:190
90.478320410072apply_filters( $tag = 'the_content', $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<' ).../post-template.php:253
100.478320410472WP_Hook->apply_filters( $value = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<', $args = [0 => '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<'] ).../plugin.php:212
110.478920413472Elementor\Frontend->apply_builder_in_content( $content = '<h2>Post Categories</h2>\t\t\n\t\t\t<ul id="main-menu"><lidata-vertical-menu=750px><a href="https://refactory.id/blog/">Blog</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-engineering/">Engineering</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-profile/">Profile</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tutorial/">Tutorial</a></li>\n<lidata-vertical-menu=750px><a href="https://refactory.id/blog-tips-trick/">Tips &#038; Trick<' ).../class-wp-hook.php:287
120.479020413848Elementor\Frontend->get_builder_content( $post_id = 5204, $with_css = ??? ).../frontend.php:898
130.479520679984Elementor\Core\DocumentTypes\Post->print_elements_with_wrapper( $elements_data = [0 => ['id' => '87ed402', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '35e86341', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '3fa089f0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '74feba6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '95255d', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../frontend.php:984
140.485020846280Elementor\Core\DocumentTypes\Post->print_elements( $elements_data = [0 => ['id' => '87ed402', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 1 => ['id' => '35e86341', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 2 => ['id' => '3fa089f0', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 3 => ['id' => '74feba6', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE], 4 => ['id' => '95255d', 'elType' => 'section', 'settings' => [...], 'elements' => [...], 'isInner' => FALSE]] ).../document.php:933
150.992929536848Elementor\Element_Section->print_element( ).../document.php:1296
160.996329646704Elementor\Element_Section->print_content( ).../element-base.php:650
170.996429648160Elementor\Element_Column->print_element( ).../element-base.php:907
180.999629749744Elementor\Element_Column->print_content( ).../element-base.php:650
191.025430413792OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->print_element( ).../element-base.php:907
201.064931179288OneElements\Includes\Widgets\PostGrid\Widget_OneElements_PostGrid->enqueue_scripts( ).../element-base.php:682
211.064931179664Elementor\Utils::handle_deprecation( $item = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper' ).../element-base.php:152
221.064931180528_deprecated_file( $file = 'jquery-slick', $version = '2.7.0', $replacement = 'Swiper', $message = ??? ).../utils.php:487
231.065031180848trigger_error( $message = 'jquery-slick is <strong>deprecated</strong> since version 2.7.0! Use Swiper instead.', $error_type = 16384 ).../functions.php:5049
×